Как браузер рассчитывает итоговый margin между двумя блочными элементами?

При работе с вертикальными отступами важно понимать, что браузер не всегда складывает значения margin.

Определение

Margin collapsing — это поведение CSS, при котором вертикальные margin соседних блочных элементов объединяются в один.

Когда происходит схлопывание

Схлопывание margin происходит в следующих случаях:

1. Между двумя соседними блочными элементами

2. Между родителем и первым или последним дочерним элементом

3. При пустых блочных элементах

Как вычисляется итоговый отступ

Если схлопываются два вертикальных margin:

• Браузер берет большее значение

• Если есть отрицательные margin, результат вычисляется сложнее

Пример:

.block-a { margin-bottom: 40px; }
.block-b { margin-top: 20px; }

Итоговый отступ будет 40px, а не 60px.

Когда margin не схлопывается

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

• Используется padding или border

• Элемент имеет overflow: hidden | auto | scroll

• Используется flex или grid

Вывод

Схлопывание margin — это стандартное поведение CSS. Его нужно учитывать при верстке, чтобы избегать неожиданных отступов.