Что такое margin collapsing

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

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

• Между соседними элементами (например, параграфами).
• Между родителем и первым/последним дочерним элементом, если у родителя нет padding, border или inline-content, разделяющего их.

Пример:

.parent {
  margin-top: 20px;
}
.child {
  margin-top: 30px;
}
/* Итоговый отступ будет 30px, а не 50px */

Не схлопываются:

• Горизонтальные отступы (margin-left/margin-right).
• Если есть padding, border или overflow: hidden у родителя.