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

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

Основные правила схлопывания:

• Схлопываются только вертикальные границы (margin-top и margin-bottom). Горизонтальные не схлопываются.
• Схлопываются только границы соседних элементов, если между ними нет других элементов, заполнения (padding), границ (border) или блочного содержимого.
• Верхняя граница первого дочернего элемента схлопнется с верхней границей его родителя, если между ними нет padding, border или другого содержимого.
• Нижняя граница последнего дочернего элемента схлопнется с нижней границей его родителя, если между ними нет padding, border или другого содержимого.
• Верхняя и нижняя границы пустого элемента могут схлопнуться между собой, если у него нет padding, border или содержимого.
• Если одна из схлопывающихся границ отрицательная, итоговый размер равен сумме положительного и отрицательного значений (или абсолютному значению, если оба отрицательны и суммарное значение меньше нуля).

Пример:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

В данном случае вертикальное расстояние между box1 и box2 будет 30px (максимальное из 20px и 30px), а не 50px.

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

• Добавить padding или border между элементами.
• Создать новый блок форматирования (например, с помощью overflow: hidden, display: flow-root или плавающих элементов).
• Использовать display: inline-block, display: flex или display: grid для элементов.
• Использовать абсолютное позиционирование.