Что такое схлопывание границ в CSS

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

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

• Между соседними элементами (вертикальные margin)
• Между родителем и первым/последним дочерним элементом (если у родителя нет padding/border)

Пример:

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

Здесь итоговый отступ будет 30px, а не 50px.

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

• Добавить padding или border к родителю
• Использовать overflow: hidden
• Применить flex или grid контейнер