Ce este colapsul marginilor în CSS?

Colapsarea marginilor (margin collapsing) este un fenomen în CSS în care marginile verticale ale blocurilor adiacente se unesc într-una singură. Dimensiunea acestei margini unite este determinată ca valoarea maximă dintre marginile care se colapsează.

Colapsarea are loc în următoarele cazuri:

Între elemente adiacente: Marginile verticale ale a două elemente vecine se colapsează.
```
<p>Paragraf 1</p>
<p>Paragraf 2</p>
```
Dacă <p> are margin-bottom și margin-top respectiv, aceste marginile pot colapsa.
Între un element părinte și primul/ultimul copil: Dacă părintele nu are border, padding, display: flex, display: grid, overflow: hidden sau alte proprietăți care creează un context de formatare, marginea superioară a acestuia poate colapsa cu margin-top al primului copil. Similar, marginea inferioară a părintelui poate colapsa cu margin-bottom al ultimului copil.
```
<div class="parent">
  <p class="child">Element copil</p>
</div>
```
La un element gol: Dacă un element nu are conținut (height: 0, fără border și fără padding), marginile superioară și inferioară ale acestuia pot colapsa între ele.
```
<div class="empty"></div>
```

Tabel ilustrativ pentru rezultatele colapsului:

Margin 1	Margin 2	Rezultatul colapsului
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Colapsarea marginilor are loc doar în direcția verticală (margin-top și margin-bottom). Marginile orizontale (margin-left și margin-right) nu se colapsează niciodată.

Există modalități de a preveni colapsarea, cum ar fi adăugarea de border, padding, utilizarea display: flex, display: grid, overflow: hidden sau crearea unui nou context de formatare a blocului cu display: flow-root.