Controllare i margini

14 novembre 2006

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:

p{margin: 10px 0;background: #9BD9FF}

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:

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:

div{width: 20em;background: #8CA7FF;padding: 1px 0}
p{margin: 20px}

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:

div{width: 20em;background: #8CA7FF
    border:1px solid #333;border-width:1px 0}
p{margin: 20px}

Se vuoi aggiornamenti su Controllare i margini inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Controllare i margini

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy