Почему происходит схлопывание внешних отступов и как его избежать?

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

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

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

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

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