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

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

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

Между съседни елементи: Вертикалните граници на два съседни елемента се сливат.
```
<p>Параграф 1</p>
<p>Параграф 2</p>
```
Ако <p> има margin-bottom и margin-top съответно, тези граници могат да се слеят.
Между родител и първия/последния му дете: Ако родителят няма border, padding, display: flex, display: grid, overflow: hidden или други свойства, които създават форматен контекст, неговият горен граница може да се слее с margin-top на първото дете. Аналогично, долният граница на родителя може да се слее с margin-bottom на последното дете.
```
<div class="parent">
  <p class="child">Детски елемент</p>
</div>
```
При празен елемент: Ако елементът няма съдържание (height: 0, без border и padding), неговите горен и долен граници могат да се слеят.
```
<div class="empty"></div>
```

Таблица, илюстрираща резултатите от сливането:

Margin 1	Margin 2	Резултат от сливането
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Сливането на граници се случва само във вертикална посока (margin-top и margin-bottom). Хоризонталните граници (margin-left и margin-right) никога не се сливат.

Има начини да се предотврати сливането, като например добавяне на border, padding, използване на display: flex, display: grid, overflow: hidden или създаване на нов форматен контекст с display: flow-root.