Что такое схлопывание внешних отступов в CSS

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

Когда происходит:

• Между соседними блоками (без границ, padding или контента между ними)
• Между родителем и первым/последним дочерним элементом (если у родителя нет padding/border)

Пример:

.parent {
  margin-top: 20px;
}
.child {
  margin-top: 30px;
}

В этом случае отступ между родителем и верхним краем будет 30px (не 50px!).

Как избежать:

• Добавить padding или border к родителю
• Использовать overflow: hidden или display: flow-root
• Заменить margin на padding где возможно