CSS: spaziatura verticale tra gli elementi

CSS: spaziatura verticale tra gli elementi

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.

Torna su