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:
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}
Controllare i margini
Prima di concludere, una piccola nota pratica. Per consentire una presentazione decente
di pagine HTML in assenza dei CSS, praticamente tutti i browser assegnano di default margini
(e in alcuni casi padding) su elementi block-level quali titoli, paragrafi, liste.
Alcuni autori suggeriscono di annullare margini e padding di tutti gli elementi:
*{margin: 0;padding: 0}
Personalmente trovo questa pratica di sviluppo decisamente scomoda: i margini di tutti
gli elementi di pagina andranno poi ridefiniti uno per uno. È importante a parer mio
non avere margine tra un titolo e il paragrafo successivo. Il più delle volte basta
annullare il margine inferiore dei titoli e quello superiore dei paragrafi, lasciando
i margini e il padding assegnato di default per gli altri elementi. Ecco la regola:
h1,h2,h3,h4,h5,h6{margin-bottom: 0}
p{margin-top: 0}
Conclusioni e approfondimenti
In questo appuntamento abbiamo visto brevemente alcuni aspetti che riguardano
i margini. Oltre alle specifiche CSS
ci sono molti approfondimenti sugli argomenti trattati:
