В каких случаях возникает margin collapse

Margin collapse происходит, когда вертикальные отступы (margin-top и margin-bottom) соседних элементов сливаются в один. Основные случаи:

1. Соседние элементы - если у двух соседних блоков есть margin, выбирается наибольший:

div { margin: 20px 0; } /* итоговый отступ между ними будет 20px, а не 40px */

2. Родитель и первый/последний потомок - если у родителя нет padding/border, его margin может схлопнуться с margin потомка.

3. Пустые блоки - если у элемента нет контента, padding и border, его margin-top и margin-bottom схлопываются.

Исключения:

• Горизонтальные margin никогда не схлопываются
• Flex и grid контейнеры предотвращают collapse
• Позиционирование (absolute, float) также отключает схлопывание