Бывают моменты, когда вертикальные отступы верхнего и нижнего margin приводят начинающего верстальщика в недоумение. Рассмотрим такой вариант на примере:

HTML

<div class=”center”>
   <h1>Заглавие</h1>
   <p>Текст</p>
   <p>С абзацами</p>
   <ol>
      <li>Списком</li>
      <li>Строка2</li>
   </ol>
</div>

CSS

.center {
   margin-top: 10px;
   margin-bottom: 5px;
}
p {
   margin: 15px 0px;
}
ol {
   margin-top:20px
}
li {
   margin: 35px;
}

Верстальщик ожидает увидеть следующее:

Однако на практике получается совсем другая картина:

И тогда появляется вопрос: почему нет некоторых отступов?

Ответ на него прост. Маржин отобразился именно так, как он был прописан в CSS, а вывод отличается от ожидаемого только потому, что произошло так называемое схлопывание этого свойства.

Схлопывание маржина — это наплывание граничных отступов друг на друга.

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

Как это выглядит на практике?

Схлопывание выглядит следующим образом, например, у нас есть картинка с подписью:

HTML

<img src=”#” title=”Рисунок 1”>
<p>Подпись</p>

CSS

img {
   margin-bottom:25px;
}
p {
   margin-top:10px;
}

Вопреки ожиданием отступ между картинкой и её подписью не будет равен 35 px, больший маржин поглотит меньший, следовательно, картинку и её подпись разделит путь в 25 px.

Дочерние элементы и их родители

HTML

<h1>Заглавие основного текста</h1>
<p>Родительский элемент<span>Дочерний элемент</span></p>

CSS

p{
   margin: 10px 0px;
}
span{
   margin: 30px 0px;
}

В таком случае отступ от тэга h1 и тэга pбудет равен 30px. Следовательно, дочерний элемент, у которого отступ больше, потянет за собой и родителя, а родительский отступ схлопнется с дочерним.

Единственным вариантом, когда отступы суммируются является случай если они имеют разноимённые знаки (один имеет знак +, другой знак -)

Чем это поможет?

Это свойство вертикального margin пригодится при разметке текста. Так к примеру если тэгу p задать:

p {
   margin:5px 0px;
}

То между всеми абзацами будет отступ в 5 пикселей, и нам не придётся размечать первый и последний абзац, или в худшем случае все кроме них.

Когда схлопывание не происходит?

Схлопывания не произойдёт, если:

1. У элемента есть некий paddingили border;
2. Блок является корневым;
3. Блок или дочерний элемент плавающий;
4. Блок имеет абсолютную позицию;
5. Блок или дочерний элемент является строчным.
6. У блока установлен отличающийся от стандартного контекст форматирования.