1

Есть несколько вопросов по отступам на конкретных примерах:

  1. Элементарный html-код.

div {
    height: 100px;
}
<div class="header" style="background-color: red;">
</div>

<div class="content" style="background-color: blue;">
</div>

<div class="footer" style="background-color: green;">
</div>

Вопрос: откудого появляются отступы от краев? Я думал div должен занимать всю ширину.

  1. Удаление отступов.

Мне удалось удалить все отступы, указав у body margin: 0. Но почему margin, а не padding? Ведь margin это отступ между элементами, а body - единственный элемент. Логичнее было бы padding: 0.

body {
    margin: 0;
}
div {
    height: 100px;
}
<div class="header" style="background-color: red;">
</div>

<div class="content" style="background-color: blue;">
</div>

<div class="footer" style="background-color: green;">
</div>

  1. Почему добавляется отступ сверху div-а, при добавлении в него

body {
    margin: 0;
}
div {
    height: 100px;
}
<div class="header" style="background-color: red;">
    <p></p>
</div>

<div class="content" style="background-color: blue;">
</div>

<div class="footer" style="background-color: green;">
</div>

  1. Почему пропал отступ (который появился в 3-ем пункте) и почему padding top и left отличаются? Ведь у тега р padding указано inherit?

body {
    margin: 0;
}
div {
    height: 100px;
    padding: 10px;
}
p {
    padding: inherit;
}
<div class="header" style="background-color: red;">
    <p>text</p>
</div>

<div class="content" style="background-color: blue;">
</div>

<div class="footer" style="background-color: green;">
</div>

1
  • не легче добавить reset.css?! или наоборот это усложнит жизнь?!
    – ratatuy
    4 дек 2017 в 12:11

4 ответа 4

1

В спецификации HTML и CSS есть много неоговоренных вещей, которые разработчики делают как посчитают нужным. К примеру, вы практически нигде не встретите конкретное значение отступов и есть ли они вообще у элементов. В первую очередь стоит помнить, что HTML является гипертекстом и делался для нужд передачи документов.

  1. Вы наверное замечали, что всякие официальные документы имеют отступы от краев, в том же Word или при выводе на печать? Это делается для удобства чтения, текст на краю выглядит очень плохо. Поэтому делают отступ от краев документа.

  2. Margin - это в первую очередь отступ от края элемента до него самого. А padding от границы до контента, поэтому не забывайте про границы border(!). Поэтому логично, что данный отступ оформлен через margin, поскольку это правило пришло из оформления документов.

введите сюда описание изображения


Заметьте, этот отступ дает браузер как "user agent stylesheet" и разные браузеры могут давать разные отступы, размеры и прочее, что явно не указано в документации.

  1. Это эффект схлопывания границ. Если у внутреннего элемента margin больше, чем у внешнего, то они оба отодвигаются от верхней границы на величину внутреннего элемента. У p от 16 и потому общий margin становится равен 16 т.к. 16 > 8 и берется больший. Причем тема схлопывания довольно специфицная, к примеру при добавлении текста, границ, отступов схлопывание пропадает.

введите сюда описание изображения

Посмотрите тут часть про "вложенные элементы", да и вообще всю статью: http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

  1. Опять же исходя из пункта 3 и эффекта схлопывания пропадает. Ну и еще есть отступы у самого <p>, хотя их конкретное значения в пикселях явно в документации не указано, но вы видите разницу.

введите сюда описание изображения

2
  • 1
    В 3 примере вы не правы. что что вы показываете как 16 пикселей на картинке, на самом деле 32. Что касается отступов в 4 посмотрите Мой ответ. И дополните ваш, так как его скорее всего примут. 4 дек 2017 в 12:52
  • @VasiliyRusin да, спасибо, я так давно с этим не сталкивался, что уже забыл как они точно работают.
    – Alex Krass
    4 дек 2017 в 13:12
1

По умолчанию, каждый элемент имеет свои отступы, при том в каждом из браузеров они могут немного отличаться. Это сделано специально чтобы когда добавляется что-то на страницу которая не имеет какого-то стиля все выглядело не слипишимся.

Для того чтобы это убрать существуют reset.css или же normalize.css ими желательно пользоваться, они убирают отступы которые не нужны и оставляют те что нужны. К примеру у body есть свой отступ который равняется кажись 20px он в целом никому не нужен, кроме редких случаев. Так же есть отступы margin у таких елементов как h1, p - часто грамотный дизайнер знает какой отступ у этих елементов и рисует исходя из этого.. тем самым Вам не нужно ставть отступ каждому елементу уникальный

Но... это не точно =)

0
1

По порядку:

  1. Именно так. div занимает всю ширину body. Именно это вы и видите. Отступы напрямую связаны со вторым вопросом.
  2. margin по тому что это внешний отступ от тега html.
  3. По тому что у тега p есть margin, однако по умолчанию div имеет overflow: visible, что позволяет margin тега p выходит за пределы div, так как нет границ которые будут его ограничивать, исправить это можно либо ответом из 4 вопроса (НЕ рекомендуется), либо добавлением overflow: auto или overflow: hidden в зависимости от того что вы желаете получить.
  4. padding-top и padding-left не отличаются, они оба все еще равны 10, но у Вас все еще есть margin. Что касается того, почему пропал отступ сверху. По тому что padding > 1 unit (любые единицы измерения), немного изменит поведение overflow: visible. Если раньше margin, тега p ничего не ограничивало, то теперь есть padding у родительского div. По этому теперь стили перерисовываются с этим условием.
1

откудого появляются отступы от краев?

У body по умолчанию margin: 8px.

Но почему margin, а не padding?

Потому что так принято. Если ты ему position: relative пропишешь, то absolute с нулём встанет по этому отступу, а по паддингу бы не встал:

body {
  position: relative;
  margin: 1em;
  padding: 1em;
  outline: 1px dotted red;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  background: silver;
}
<div></div>
123456<br>
7890123

body - единственный элемент

Нет, есть ещё head:

head, style { display: block; }
<h1>Заголовок</h1>

Почему добавляется отступ сверху div-а, при добавлении в него

Это называется margin collapse (схлопывание марджинов). Предлагаю почитать отдельно.

Почему пропал отступ (который появился в 3-ем пункте)

Тоже margin collapse, только на этот раз отступы не схлопываются.

почему padding top и left отличаются?

Они не отличаются, ты просто забыл про margin: 1em 0 по умолчанию у p.

PS: Что делать, если не работает CSS-класс?

2
  • Почему пропал отступ (который появился в 3-ем пункте) - Тоже margin collapse. Тут Вы не правы, это как раз отсутствие схлопывания. 5 дек 2017 в 9:32
  • @VasiliyRusin, под margin collapse я имел в виду всю схему взаимодействия вертикальных отступов, включающую оба случая - и когда схлопывание происходит, и когда оно не происходит. Т. е. я НЕ имел в виду, что он с чем-то схлопывается.
    – Qwertiy
    5 дек 2017 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.