Czym jest znikanie granic w CSS?

Zanikanie marginesów (margin collapsing) to zjawisko w CSS, gdy pionowe marginesy sąsiadujących bloków łączą się w jeden. Rozmiar tego połączonego marginesu jest określany jako maksymalna wartość z zanikanających marginesów.

Zanikanie występuje w następujących przypadkach:

Między sąsiednimi elementami: Pionowe marginesy dwóch sąsiednich elementów się zlewają.
```
<p>Akapit 1</p>
<p>Akapit 2</p>
```
Jeśli <p> ma odpowiednio margin-bottom i margin-top, te marginesy mogą się zlewać.
Między elementem nadrzędnym a jego pierwszym/ostatnim dzieckiem: Jeśli rodzic nie ma border, padding, display: flex, display: grid, overflow: hidden lub innych właściwości tworzących kontekst formatowania, jego górny margines może się zlewać z margin-top pierwszego dziecka. Podobnie, dolny margines rodzica może się zlewać z margin-bottom ostatniego dziecka.
```
<div class="parent">
  <p class="child">Element dziecka</p>
</div>
```
Przy pustym elemencie: Jeśli element nie ma zawartości (height: 0, brak border i padding), jego marginesy górny i dolny mogą się zlewać.
```
<div class="empty"></div>
```

Tabela ilustrująca wyniki zanikania:

Margines 1	Margines 2	Wynik zanikania
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Zanikanie marginesów zachodzi tylko w kierunku pionowym (margin-top i margin-bottom). Marginesy poziome (margin-left i margin-right) nigdy nie zanikaną.

Istnieją sposoby zapobiegania zanikania, np. dodanie border, padding, użycie display: flex, display: grid, overflow: hidden lub utworzenie nowego kontekstu formatowania bloku za pomocą display: flow-root.