Mi az a határok összeolvadása a CSS-ben?

A margók összeolvadása (margin collapsing) egy CSS jelenség, amikor a szomszédos blokkok függőleges margói egyesülnek egyetlen margóvá. Ennek az összeolvadó margónak a mérete a legnagyobb érték lesz a összeolvadó margók közül.

Az összeolvadás a következő esetekben fordul elő:

Szomszédos elemek között: Két szomszédos elem függőleges margói összeolvadnak.
```
<p>Bekezdés 1</p>
<p>Bekezdés 2</p>
```
Ha a <p> elemek margin-bottom és margin-top értékekkel rendelkeznek, ezek a margók összeolvadnak.
Szülő és első/utolsó gyermek között: Ha a szülő nem rendelkezik border, padding, display: flex, display: grid, overflow: hidden vagy más olyan tulajdonsággal, ami formázási kontextust teremt, akkor a szülő felső margója összeolvad az első gyermek margin-top értékével. Hasonlóképpen, a szülő alsó margója összeolvad az utolsó gyermek margin-bottom értékével.
```
<div class="parent">
  <p class="child">Gyermek elem</p>
</div>
```
Üres elem esetén: Ha egy elemnek nincs tartalma (height: 0, border és padding nélkül), akkor a felső és alsó margók összeolvadnak.
```
<div class="empty"></div>
```

A összeolvadás eredményét szemléltető táblázat:

Margin 1	Margin 2	Összeolvadási eredmény
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

A margók összeolvadása csak függőlegesen (csak margin-top és margin-bottom) történik. A vízszintes margók (margin-left és margin-right) soha nem olvadnak össze.

Az összeolvadás megelőzésére több módszer is létezik, például border, padding hozzáadása, display: flex, display: grid használata, overflow: hidden alkalmazása vagy új formázási kontextus létrehozása a display: flow-root segítségével.