Cos'è il collapsing dei bordi in CSS?

Il collasso dei margini (margin collapsing) è un fenomeno in CSS in cui i margini verticali di blocchi adiacenti si fondono in uno solo. La dimensione di questo margine unificato è determinata come il valore massimo dei margini che collassano.

Il collasso avviene nei seguenti casi:

Tra elementi adiacenti: I margini verticali di due elementi vicini si collassano.
```
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
```
Se <p> ha margin-bottom e margin-top rispettivamente, questi margini possono collassare.
Tra un elemento genitore e il suo primo/ultimo figlio: Se il genitore non ha border, padding, display: flex, display: grid, overflow: hidden o altre proprietà che creano un contesto di formattazione, il suo margine superiore può collassare con il margin-top del primo figlio. Analogamente, il margine inferiore del genitore può collassare con il margin-bottom dell'ultimo figlio.
```
<div class="parent">
  <p class="child">Elemento figlio</p>
</div>
```
In un elemento vuoto: Se un elemento non ha contenuto (height: 0, senza border né padding), i suoi margini superiore e inferiore possono collassare tra loro.
```
<div class="empty"></div>
```

Tabella che illustra i risultati del collasso:

Margine 1	Margine 2	Risultato del collasso
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Il collasso dei margini avviene solo in direzione verticale (margin-top e margin-bottom). I margini orizzontali (margin-left e margin-right) non collassano mai.

Esistono modi per prevenire il collasso, come aggiungere border, padding, usare display: flex, display: grid, overflow: hidden o creare un nuovo contesto di formattazione del blocco con display: flow-root.