Ответ
Схлопывание margin'ов (margin collapsing) происходит, когда вертикальные отступы соседних элементов объединяются в один. Это зависит от:
- Направления margin: работает только с вертикальными (top/bottom) margin'ами.
- Типа элементов: схлопывание происходит между блочными элементами (block-level), но не работает с flex, grid или абсолютно позиционированными элементами.
- Родительских отношений: margin'ы дочернего элемента могут схлопнуться с margin'ами родителя, если у родителя нет padding, border или inline-контента.
Пример:
<div style="margin-bottom: 20px;">Первый блок</div>
<div style="margin-top: 30px;">Второй блок</div>Фактический отступ между блоками будет 30px (а не 50px), так как margin'ы схлопнулись.