Что такое схлопывание границ в CSS?

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

Основные правила схлопывания:

• Схлопываются только вертикальные границы (margin-top и margin-bottom). Горизонтальные не схлопываются.
• Схлопываются только границы соседних элементов, если между ними нет других элементов, заполнения (padding), границ (border) или блочного содержимого.
• Верхняя граница первого дочернего элемента схлопнется с верхней границей его родителя, если между ними нет padding, border или другого содержимого.
• Нижняя граница последнего дочернего элемента схлопнется с нижней границей его родителя, если между ними нет padding, border или другого содержимого.
• Верхняя и нижняя границы пустого элемента могут схло