CSS: come i margini verticali collassano

  • CSS
  • Gabriele Romanato

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:


div.box {
	background: #eec;
	padding: 1em;
	margin: 1em 0;
	border: 1px solid;
}

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:


div.different {
	background: #ccc;
	margin-top: 2em;
}

div.different2 {
	background: #def;
	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.

Potete visionare l'esempio finale in questa pagina.

Torna su