Cos'è il collapsing dei bordi in CSS?

L'imbottitura dei margini (margin collapsing) è un fenomeno in CSS in cui i margini verticali di due o più blocchi adiacenti si uniscono in un unico margine. La dimensione di questo margine comune è determinata dal valore più grande tra i margini che si sovrappongono.

Regole principali dell'imbottitura:

• Solo i margini verticali (margin-top e margin-bottom) si sovrappongono. Quelli orizzontali no.
• Si sovrappongono solo i margini di elementi adiacenti se tra loro non ci sono altri elementi, padding, border o contenuto di blocco.
• Il margine superiore del primo elemento figlio si sovrapporrà con il margine superiore del suo genitore se tra loro non ci sono padding, border o altro contenuto.
• Il margine inferiore dell'ultimo elemento figlio si sovrapporrà con il margine inferiore del suo genitore se tra loro non ci sono padding, border o altro contenuto.
• I margini superiore e inferiore di un elemento vuoto possono sovrapporsi tra loro se l'elemento non ha padding, border o contenuto.
• Se uno dei margini che si sovrappongono è negativo, la dimensione finale sarà la somma dei valori positivi e negativi (o il valore assoluto se entrambi sono negativi e la somma è inferiore a zero).

Esempio:

<div class="box1">Elemento 1</div>
<div class="box2">Elemento 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

In questo caso, la distanza verticale tra box1 e box2 sarà di 30px (il valore massimo tra 20px e 30px), non 50px.

Metodi per prevenire l'imbottitura:

• Aggiungere padding o border tra gli elementi.
• Creare un nuovo blocco di formattazione (ad esempio, usando overflow: hidden, display: flow-root o elementi flottanti).
• Usare display: inline-block, display: flex o display: grid per gli elementi.
• Usare il posizionamento assoluto.