В каких случаях margin collapsing применяется, а в каких нет?

Question

Margin collapsing — это схлопывание вертикальных отступов у блочных элементов. Оно происходит только для вертикальных margin. Горизонтальные margin не схлопываются. Схлопывание зависит от структуры DOM и контекста элементов. Это часто становится источником багов в вёрстке.

YeaHub · Accepted Answer

Margin collapsing — одно из самых сложных для понимания поведений CSS, так как оно не всегда интуитивно.ОпределениеMargin collapsing — это поведение CSS, при котором вертикальные margin соседних блочных элементов объединяются в один отступ.Когда применяется схлопываниеMargin collapsing происходит, если:элементы являются блочнымиmargin вертикальный (top или bottom)между элементами нет контента, border или paddingэлементы находятся в нормальном потоке документаТипичные случаиЧаще всего схлопываются:margin-bottom первого элемента и margin-top следующегоmargin родителя и первого дочернего элементаmargin родителя и последнего дочернего элементаКогда margin collapsing НЕ применяетсяСхлопывания не будет, если:используется flex или grid-контейнересть border или padding между элементамиэлемент имеет position: absolutemargin горизонтальный (left или right)элемент является inline или inline-blockПрактические последствияИз-за collapsing:реальные отступы могут быть меньше ожидаемыхlayout может выглядеть «сломанным»отладка требует знания DOM-структурыКраткий выводMargin collapsing — это нормальное, но неочевидное поведение CSS, которое нужно учитывать при работе с вертикальными отступами.