Как схлопываются margin-ы?

Что такое схлопывание margin-ов?

В CSS вертикальные внешние отступы (margin-top и margin-bottom) могут объединяться в один отступ, размер которого равен максимальному из двух. Это поведение называется схлопыванием (collapsing) и является частью спецификации CSS. Оно применяется только к вертикальным отступам в нормальном потоке документа; горизонтальные отступы (margin-left, margin-right) никогда не схлопываются.

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

• Соседние элементы: если два блока идут подряд, их вертикальные отступы схлопываются в один, равный большему.
• Родитель и первый/последний потомок: если у родителя нет padding, border или overflow, отступ потомка может выйти за пределы родителя и схлопнуться с его отступом.
• Пустые блоки: если у блока нет содержимого, padding, border и высоты, его собственные margin-top и margin-bottom схлопываются между собой.

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

<style>
  .box1 { margin-bottom: 30px; }
  .box2 { margin-top: 20px; }
</style>

<div class="box1">Первый</div>
<div class="box2">Второй</div>

Вместо ожидаемых 50px между блоками будет всего 30px, так как отступы схлопнутся. Это важно учитывать при верстке, чтобы не получить неожиданно маленькие промежутки.

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

• Добавить родителю padding или border — они создают барьер.
• Установить родителю свойство overflow: hidden (или auto, scroll) — создает новый блочный контекст форматирования.
• Использовать display: flex или display: grid на родителе — отступы потомков перестают схлопываться.
• Вместо margin использовать padding у родителя или gap во flex/grid.

Вывод

Схлопывание margin-ов — это стандартное поведение CSS, которое нужно понимать, чтобы предсказывать расстояния между элементами. Если вы сталкиваетесь с неожиданными промежутками, проверьте, не схлопываются ли отступы, и при необходимости используйте один из методов предотвращения, особенно при работе с современными макетами на flexbox или grid.