Какво е колапс на маржове и за какво се използва?

Схлопването на отстъпите (margin collapsing) е механизъм в CSS, при който вертикалните отстъпи на два или повече съседни блокови елемента, както и на родителя и първия/последния му дете, не се събират, а се схлопват в един отстъп, равен на най-големия от тях.

Схлопването се случва в следните случаи:

• Съседни елементи: горният margin-bottom на един елемент и margin-top на следващия.
• Родител и първи/последен дете: margin-top на родителя и margin-top на първото дете; margin-bottom на родителя и margin-bottom на последното дете. Произвежда се, ако между тях няма граница (border), отстъпка (padding), вградено (inline) съдържание или ако родителят не е flex/grid контейнер.
• Празни блокове: margin-top и margin-bottom на елемента, ако той няма съдържание, граници или отстъпки.

Пример за съседни елементи:

<div style="margin-bottom: 20px;">Елемент 1</div>
<div style="margin-top: 30px;">Елемент 2</div>

В този случай разстоянието между елементите ще бъде 30px, а не 50px.

Пример за родител и първо дете:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Детен елемент</div>
</div>

Разстоянието от горния ръб на родителя до съдържанието му ще бъде 40px.

За какво се използва:

Схлопването на отстъпите помага да се поддържат предсказуеми вертикални разстояния между блоковете в нормалния поток на документа, като предотвратява излишни пропуски. То улеснява създаването на съгласувана вертикална ритмика на типографията, тъй като дизайнерите могат да задават отстъпи за параграфи или заглавия независимо, а браузърът сам ще се погрижи за правилното обединяване на пространството.

Как да се предотврати схлопването:

• Добавяне на граница (border) между елементите или между родителя и дете.
• Добавяне на отстъпка (padding) между елементите или между родителя и дете.
• Използване на свойството overflow със стойност, различна от visible, на родителския елемент.
• Използване на плаващ елемент (float).
• Използване на позициониране absolute или fixed.
• Превръщане на елементите в контекст на форматиране Flexbox или Grid (родителският елемент).
• Превръщане на елемента в inline-block.

/* Предотвратяване за родител и дете */
.parent {
  border-top: 1px solid transparent; /* или padding-top */
}

/* Предотвратяване за съседни елементи */
.element + .element {
  margin-top: 0; /* или border-top */
}