Схлопывание отступов (margin collapsing) — это механизм в CSS, при котором вертикальные отступы двух или более соседних блочных элементов, а также родителя и первого/последнего дочернего элемента, не складываются, а схлопываются в один отступ, равный наибольшему из них.
Схлопывание происходит в следующих случаях:
margin-bottom одного элемента и margin-top следующего элемента.margin-top родителя и margin-top первого потомка; margin-bottom родителя и margin-bottom последнего потомка. Происходит, если между ними нет границы (border), отбивки (padding), встроенного (inline) содержимого или если родитель не является flex/grid контейнером.margin-top элемента и его же margin-bottom, если у него нет содержимого, границы или отбивки.Пример соседних элементов:
htmlВ этом случае расстояние между элементами будет 30px, а не 50px.
Пример родитель и первый дочерний элемент:
htmlРасстояние от верхнего края родителя до его содержимого будет 40px.
Для чего используется:
Схлопывание отступов помогает поддерживать предсказуемые вертикальные расстояния между блоками в нормальном потоке документа, предотвращая излишние пропуски. Оно упрощает создание согласованной типографической вертикальной ритмики, так как дизайнеры могут указывать отступы для абзацев или заголовков независимо, и браузер сам позаботится о корректном объединении пространства.
Как предотвратить схлопывание:
border) между элементами или между родителем и потомком.padding) между элементами или между родителем и потомком.overflow со значением отличным от visible на родительском элементе.float).absolute или fixed.csscss