Зачем нужен Margin Collapse

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

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

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

Пример:

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

Вместо 50px (20 + 30) итоговый отступ будет 30px (берется больший margin).

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

• Добавить padding или border к родителю.
• Использовать overflow: hidden или display: flow-root.
• Применить Flexbox/Grid (в них margin collapse не работает).

Полезно для контроля отступов без лишних промежутков.