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

Question

Вертикальные margin у блочных элементов могут схлопываться.Если два вертикальных margin соприкасаются, браузер не суммирует их, а берет максимальный.Это поведение называется margin collapsing.Горизонтальные margin не схлопываются.

YeaHub · Accepted Answer

При работе с вертикальными отступами важно понимать, что браузер не всегда складывает значения margin.ОпределениеMargin collapsing — это поведение CSS, при котором вертикальные margin соседних блочных элементов объединяются в один.Когда происходит схлопываниеСхлопывание margin происходит в следующих случаях:Между двумя соседними блочными элементамиМежду родителем и первым или последним дочерним элементомПри пустых блочных элементахКак вычисляется итоговый отступЕсли схлопываются два вертикальных 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. Его нужно учитывать при верстке, чтобы избегать неожиданных отступов.