Что такое схлопывание отступов (margin collapse) и для чего оно используется?

Схлопывание отступов (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

Расстояние о