Nei CSS i margini verticali degli elementi collassano per formare un unico margine.
Questo accade tra il margine inferiore di un box e il margine superiore del box che lo segue. Per anni i margini collassati sono stati ignorati fino alla versione 8 di Internet Explorer, che interpreta le specifiche CSS correttamente. Vediamone i dettagli.
Abbiamo una serie di box:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box different"></div>
<div class="box different2"></div>
Quando il margine inferiore di un elemento è uguale al margine superiore dell'elemento, il margine collassato avrà la stessa misura:
.box {
margin: 1em 0;
}
In questo caso il margine collassato risultante sarà di 1em. Quando invece un margine è superiore all'altro, la misura maggiore determina la misura finale del margine collassato:
.different {
margin-top: 2em;
}
.different2 {
margin-top: 0.5em;
}
La prima misura sarà di 2em, perché è maggiore del margine inferiore dell'elemento precedente. La seconda misura, invece, sarà di 1em, perché è inferiore al margine inferiore dell'elemento precedente.