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

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

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

Пример:

html

css

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

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

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

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