Какво е сливането на граници в CSS?

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

Основни правила за сливане:

• Сливат се само вертикалните граници (margin-top и margin-bottom). Хоризонталните не се сливат.
• Сливат се само границите на съседни елементи, ако между тях няма други елементи, padding, border или съдържание на блок.
• Горната граница на първия дете ще се слее с горната граница на неговия родител, ако между тях няма padding, border или друго съдържание.
• Долната граница на последното дете ще се слее с долната граница на неговия родител, ако между тях няма padding, border или друго съдържание.
• Горните и долните граници на празен елемент могат да се слеят, ако той няма padding, border или съдържание.
• Ако една от сливаните граници е отрицателна, крайният размер е сумата на положителните и отрицателните стойности (или абсолютната стойност, ако и двете са отрицателни и сумата е по-малка от нула).

Пример:

<div class="box1">Елемент 1</div>
<div class="box2">Елемент 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

В този случай вертикалното разстояние между box1 и box2 ще бъде 30px (най-голямата стойност между 20px и 30px), а не 50px.

Начини за предотвратяване на сливането:

• Добавяне на padding или border между елементите.
• Създаване на нов блок за форматиране (например, с overflow: hidden, display: flow-root или плаващи елементи).
• Използване на display: inline-block, display: flex или display: grid за елементите.
• Използване на абсолютна позиция.