Что такое схлопывание границ (margin collapsing) в CSS

Margin collapsing — это особенность CSS, при которой внешние отступы (margin) вертикально смежных блоков схлопываются (то есть не складываются, а берётся больший из них).

Эта особенность работает только с вертикальными отступами (margin-top, margin-bottom) и может вызывать неожиданные визуальные эффекты.

Пример схлопывания margin'ов

<div class="block1">...</div>
<div class="block2">...</div>

.block1 {
  margin-bottom: 30px;
}

.block2 {
  margin-top: 50px;
}

Что отобразится между блоками?

50px, а не 80px. Потому что отступы схлопнулись (взялся больший).

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

• Смежные вертикально стоящие блоки
  • Когда margin-bottom одного элемента граничит с margin-top другого.
  • Работает только по вертикали.
• Родитель и первый/последний ребёнок
  • Если у родителя нет padding, border, inline content и т. д.
  • Margin первого/последнего ребёнка схлопывается с margin родителя.
• Пустые блоки
  • Если блок пустой, margin сверху и снизу схлопываются в один.

Пример родителя и ребёнка

<div class="parent">
  <div class="child">Я потомок</div>
</div>

.parent {
  margin-top: 30px;
}

.child {
  margin-top: 50px;
}

Что произойдёт?

Если .parent не имеет padding, border или content, его margin-top и margin-top потомка схлопнутся до 50px.

Как избежать схлопывания?

• Добавить padding или border родителю
• Использовать overflow: hidden / auto / scroll
• Использовать display: flex или grid
• Добавить пустой ::before или ::after с content: "" и display: table

.parent {
  overflow: hidden; /* или auto */
}

Вывод