Схлопывание внешних отступов (margin collapsing) происходит, когда вертикальные отступы двух блочных элементов соприкасаются и не складываются, а накладываются друг на друга, образуя общее пространство, равное большему из отступов. 23

Некоторые ситуации, в которых происходит схлопывание:

• Смежные вертикально стоящие блоки. 3 Когда margin-bottom одного элемента граничит с margin-top другого. 3
• Родитель и первый/последний ребёнок. 3 Если у родителя нет padding, border, inline content и т. д., margin первого/последнего ребёнка схлопывается с margin родителя. 3
• Пустые блоки. 3 Если блок пустой, margin сверху и снизу схлопываются в один. 3

Чтобы избежать схлопывания, можно использовать следующие методы:

• Добавить padding или border родителю. 35 Это отключит эффект схлопывания. 1
• Использовать overflow: hidden / auto / scroll. 3
• Применить display: flex или grid. 35 Если у родительского элемента указано такое свойство, то отступы дочерних элементов не схлопнутся. 2
• Задать элементам только нижний отступ (margin-bottom). 2 В этом случае у элемента будет нижний отступ, которым он примкнёт к следующему элементу без верхнего отступа. 2
• Использовать gap вместо margin внутри grid или flex-контейнеров. 5 Это полностью исключает проблему схлопывания. 5