Что такое схлопывание отступов (margin collapse) и для чего оно используется?

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

Схлопывание происходит в следующих случаях:

• Соседние элементы: Верхний margin-bottom одного элемента и margin-top следующего элемента.
• Родитель и первый/последний дочерний элемент: margin-top родителя и margin-top первого потомка; margin-bottom родителя и margin-bottom последнего потомка. Происходит, если между ними нет границы (border), отбивки (padding), встроенного (inline) содержимого или если родитель не является flex/grid контейнером.
• Пустые блоки: margin-top элемента и его же margin-bottom, если у него нет содержимого, границы или отбивки.

Пример соседних элементов:

<div style="margin-bottom: 20px;">Элемент 1</div>
<div style="margin-top: 30px;">Элемент 2</div>

В этом случае расстояние между элементами будет 30px, а не 50px.

Пример родитель и первый дочерний элемент:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Дочерний элемент</div>
</div>

Расстояние от верхнего края родителя до его содержимого будет 40px.

Для чего используется:

Схлопывание отступов помогает поддерживать предсказуемые вертикальные расстояния между блоками в нормальном потоке документа, предотвращая излишние пропуски. Оно упрощает создание согласованной типографической вертикальной ритмики, так как дизайнеры могут указывать отступы для абзацев или заголовков независимо, и браузер сам позаботится о корректном объединении пространства.

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

• Добавить границу (border) между элементами или между родителем и потомком.
• Добавить отбивку (padding) между элементами или между родителем и потомком.
• Использовать свойство overflow со значением отличным от visible на родительском элементе.
• Осуществить плавающий элемент (float).
• Использовать позиционирование absolute или fixed.
• Перевести элементы в контекст форматирования Flexbox или Grid (родительский элемент).
• Превратить элемент в inline-block.

/* Предотвращение для родителя и дочернего элемента */
.parent {
  border-top: 1px solid transparent; /* или padding-top */
}

/* Предотвращение для соседних элементов */
.element + .element {
  margin-top: 0; /* или border-top */
}