CSS  »  Articoli  »  CSS hack e tecniche cross browser 

I margini sono uno degli aspetti essenziali del design: in questo appuntamento vedremo alcuni aspetti teorici e pratici per controllarli al meglio. Ci riferiremo in particolare ai margini verticali, mentre per una trattazione sui margini negativi e orizzontali rimando a Margini orizzontali e negativi sul blog e all'articolo Margini negativi qui nella sezione CSS di HTML.it.

Collapsing margin

Siamo così pronti a presentare il primo esempio in cui ai paragrafi viene attribuito un colore di sfondo azzurro e un margine verticale di 10 pixel:

Come si può notare nell'esempio, lo spazio che divide i due paragrafi è in realtà 10 pixel, per il fatto che i margini verticali collassano. In generale, quando sono coinvolti due margini verticali di elementi block level non posizionati né float, il margine effettivo che li separa è il maggiore dei due valori. Questo aspetto è logico e desiderato, c'è invece un caso in cui i margini verticali possono sorprenderci.

Contenere i margini

Ecco quindi il secondo esempio in cui un div azzurro contiene un paragrafo con margine di 20 pixel sui quattro lati. In alcuni browser, tra cui Opera, Firefox e Safari, i margini verticali del paragrafo vengono resi all'esterno del div che lo contiene; in tutte le versioni di Internet Explorer (IE5.x, IE6 e IE7) invece i margini del paragrafo vengono resi all'interno del div. Vediamo uno screenshot:

Questa inconsistenza di resa può portare a risultati indesiderati e a volte problemi di layout ben più grossi. Il più delle volte, quello che vorremo ottenere è che i margini vengano contenuti, come su Internet Explorer.

C'è una soluzione semplice? Certo. Eric Meyer in Uncollapsing Margin suggerisce che per contenere i margini del paragrafo basta specificare un padding o un bordo verticale sul div. Vediamo quindi la versione con il padding verticale di 1px e il suo CSS:

In alternativa, potremo specificare un bordo verticale di 1px come in questo esempio: il bordo è nero, ma potrebbe essere anche dello stesso colore di sfondo del div. Ecco il CSS:

Altri articoli

Altre guide

Altre newsletter