Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Controllare i margini

Trucchi e suggerimenti per evitare inconsistenze nella resa dei margini tra i vari browser
Trucchi e suggerimenti per evitare inconsistenze nella resa dei margini tra i vari browser
Link copiato negli appunti

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{ 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- 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:


Ti consigliamo anche