Как убрать отступы и поля у всех элементов на странице?
Обнулить значения отступов и полей у всех элементов веб-страницы сразу.
Решение
Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.
Пример 1. Убираем отступы у всех элементов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Убираем отступы * Пример заголовка
Основной текст
Результат данного примера показан на рис. 1.
Рис. 1. Нулевые отступы у всех элементов на странице
Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
как убрать у фона отступы
У фона нет отступов, но отступы по умолчанию есть у body, а Вы, по всей видимости, их не сбросили.
Вот Ваш пример с отступами:
html < border: 2px solid red; >.thr-block< background: url("https://avatars.mds.yandex.net/get-pdb/1866711/5d7e1034-d839-4504-83a5-24fb2ea637d6/s1200") no-repeat; width: 100%; height: 1198px; background-size: 1500px; background-position-x: -60px; background-origin: padding-box; >А вот как будет выглядеть, если сбросить отступы по умолчанию:
html < border: 2px solid red; >body < margin: 0; >.thr-block< background: url("https://avatars.mds.yandex.net/get-pdb/1866711/5d7e1034-d839-4504-83a5-24fb2ea637d6/s1200") no-repeat; width: 100%; height: 1198px; background-size: 1500px; background-position-x: -60px; background-origin: padding-box; >Существуют разные библиотеки типа reset.css, которые нужно использовать для сброса браузерных стилей (если Вы верстаете без использования фреймворков типа Bootstrap — там сбрасывание уже включено).
Отслеживать
ответ дан 9 окт 2019 в 7:48
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков
Можно просто растянуть фон на весь блок.
background-size: cover; Отслеживать
ответ дан 9 окт 2019 в 7:44
420 3 3 серебряных знака 13 13 бронзовых знаков
я пробовал не вышло
9 окт 2019 в 7:49
- css3
- html5
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Схлопывание внешних отступов
Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны). Это поведение известно как схлопывание внешних отступов (margin collapsing). Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.
Схлопывание внешних отступов происходит в трёх случаях:
Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство clear ).
Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения margin-top родительского элемента, от margin-top одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height , min-height или max-height для отделения отступов margin-bottom родительского блока от margin-bottom отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.
Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height или min-height для отделения margin-top верхнего отступа этого блока от его margin-bottom нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.
На заметку:
- Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
- Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
- При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
- Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
- Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.
Примеры
HTML
p>Нижний отступ этого абзаца схлопнулся …p> p> … с верхним отступом этого абзаца, объеденив отступы между ними в один, равный code>1.2remcode>. p> div> Этот родительский элемент содержит два абзаца! p>Этот абзац имеет отступ code>.4remcode> между ним и текстом выше.p> p> Нижний отступ этого абзаца схлопывается с отступом родителя, принимая значение code>2remcode>. p> div> p>Этот абзац имеет отступ code>2remcode> от элемента выше.p>
CSS
div margin: 2rem 0; background: lavender; > p margin: 0.4rem 0 1.2rem 0; background: yellow; >
Шапка сайта: убрать отступ сверху
Вот css к элементу
#head
Как убрать верхний отступ?
Отслеживать
9,335 6 6 золотых знаков 24 24 серебряных знака 57 57 бронзовых знаков
задан 1 мая 2013 в 20:14
3,329 6 6 золотых знаков 31 31 серебряный знак 54 54 бронзовых знака
почему у людей работает margin: 0; а у меня нет. только margin -16px; убирает отступ, но появляется полоса прокрутки
4 авг 2014 в 14:24
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
body
Отслеживать
ответ дан 1 мая 2013 в 20:25
18.1k 20 20 серебряных знаков 42 42 бронзовых знака
Как-то так, я думаю, возможно.
Отслеживать
9,335 6 6 золотых знаков 24 24 серебряных знака 57 57 бронзовых знаков
ответ дан 2 июл 2017 в 19:15
43 1 1 серебряный знак 5 5 бронзовых знаков
Еще встретился баг: если у первого элемента в блоке ‘header’ задано свойство margin-top, он может тянуть за собой весь блок. Чтобы избежать этого, нужно задать верхний отступ первого элемента ‘padding-top’ вместо ‘margin-top’.
Отслеживать
ответ дан 5 ноя 2020 в 13:30
26 3 3 бронзовых знака
У меня ошибка была из-за такого кода
.header h1 < padding-top: 25px; /* Отступ от верхнего края блока */ margin-bottom: -20px; /* Расстояние между заголовком и обычным текстом */>Пропущенная запятая при группировке в файле CSS. Стили относились к шрифтам внутри хедера. Исправило ситуацию: .header, h1
Отслеживать
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.