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