Cos'è il collasso dei margini e a cosa serve?

Il collasso dei margini (margin collapsing) è un meccanismo in CSS in cui i margini verticali di due o più elementi di blocco adiacenti, così come del genitore e del primo/ultimo figlio, non si sommano, ma si collassano in un unico margine uguale al più grande di essi.

Il collasso avviene nei seguenti casi:

• Elementi adiacenti: Il margin-bottom superiore di un elemento e il margin-top dell'elemento successivo.
• Genitore e primo/ultimo figlio: margin-top del genitore e margin-top del primo figlio; margin-bottom del genitore e margin-bottom dell'ultimo figlio. Accade se tra loro non ci sono bordi (border), padding, contenuto inline (inline) o se il genitore non è un contenitore flex/grid.
• Blocchi vuoti: margin-top dell'elemento e il suo margin-bottom, se non ha contenuto, bordi o padding.

Esempio di elementi adiacenti:

<div style="margin-bottom: 20px;">Elemento 1</div>
<div style="margin-top: 30px;">Elemento 2</div>

In questo caso, la distanza tra gli elementi sarà di 30px, non 50px.

Esempio di genitore e primo figlio:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Elemento figlio</div>
</div>

La distanza dal bordo superiore del genitore al suo contenuto sarà di 40px.

A cosa serve:

Il collasso dei margini aiuta a mantenere distanze verticali prevedibili tra i blocchi nel normale flusso del documento, evitando spazi eccessivi. Semplifica la creazione di una ritmica tipografica coerente, poiché i designer possono specificare margini per paragrafi o intestazioni indipendentemente, e il browser si occuperà di unire correttamente gli spazi.

Come prevenirlo:

• Aggiungere un bordo (border) tra gli elementi o tra il genitore e il figlio.
• Aggiungere padding (padding) tra gli elementi o tra il genitore e il figlio.
• Usare la proprietà overflow con un valore diverso da visible sul contenitore genitore.
• Rendere un elemento flottante (float).
• Usare il posizionamento absolute o fixed.
• Trasformare gli elementi in un contesto di formattazione Flexbox o Grid (contenitore genitore).
• Trasformare l'elemento in inline-block.

/* Prevenzione per il genitore e il figlio */
.parent {
  border-top: 1px solid transparent; /* o padding-top */
}

/* Prevenzione per gli elementi adiacenti */
.element + .element {
  margin-top: 0; /* o border-top */
}