Что такое Margin Collapse

Margin collapse — это поведение CSS, когда вертикальные отступы (margin) соседних элементов схлопываются, образуя единый отступ, равный наибольшему из них.

Когда происходит:

• Между соседними блоками (без padding/border между ними)
• Между родителем и первым/последним дочерним элементом (если у родителя нет padding/border)

Пример:

.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }

Фактический отступ между блоками будет 30px (а не 50px).

Как избежать:

• Добавить padding или border
• Использовать display: flex или grid
• Применить overflow: hidden к родителю