Semplicemente

La struttura di un documento HTML è fatta, in ultima analisi, di elementi posti all'interno di altri elementi.

E' possibile rappresentarli in una struttura gerarchica ad albero oppure, visivamente, come box rettangolari contenuti all'interno di altri box rettangolari.

Il box model¹ descrive esattamente le caratteristiche dei box rettangolari generati dagli elementi.

Il box più esterno di un documento è generato dall'elemento html mentre l'ultimo può contenere testo (oppure nulla, se, per esempio, è generato dall'elemento vuoto br).

Ogni box è formato da un'area per il contenuto intorno alla quale vi sono le aree opzionali per il padding, il bordo e il margine.

Per avere un'idea grafica del box model consiglio di dare un'occhiata al modello interattivo di Douglas Livingstone.

Quanto spazio occupa un elemento?

• La larghezza dell'area del contenuto corrisponde al valore assegnato alla proprietà CSS width.
• Lo spazio visibile occupato dal box è calcolato sommando alla larghezza dell'area del contenuto i valori di padding e bordo se presenti.
• Lo spazio totale occupato dal box è calcolato sommando alla larghezza dell'area del contenuto i valori di padding, bordo e margine.

Secondo questo schema, quindi, un box con width pari a 600px, padding pari a 20px e bordo di 5px quanti pixel occuperà?²

Quirks mode e strict mode

Sono le due modalità con le quali i browser moderni interpretano i CSS.

Nella modalità standard le regole sono applicate in conformità alle specifiche W3C. Nella modalità quirks le regole sono applicate seguendo un'implementazione non standard.

Se, per esempio, è presente la dichiarazione DOCTYPE inserita con la sintassi corretta è attivato lo standard mode in caso contrario è applicato il quirks mode (doctype switching).

Per approfondire l'argomento leggete l'articolo di Peter-Paul Koch.

Il box model non standard di IE 5.x

IE 5.x include sempre nel valore designato per la proprietà width anche le misure di padding e border mentre i browser moderni applicano questo box model non standard solo in modalità quirks!.

Secondo il box model di IE 5.x, quindi, un box con width pari a 600px, padding pari a 20px e bordo di 5px quanti pixel occuperà?³

La soluzione più semplice per risolvere questo problema è indirizzare un CSS specifico a IE 5.x utilizzando i commenti condizionali. Oppure non usare mai le proprietà padding e border ;).

Il margine

Il margine è lo spazio esistente tra il limite esterno di un elemento e il limite esterno degli elementi adiacenti. Lo sfondo dell'area del margine è sempre trasparente.

I margini verticali non hanno effetto sugli elementi in linea (gli elementi che risiedono sulla stessa riga, per esempio span).

Le proprietà del margine sono: margin-top, margin-right, margin-bottom, margin-left insieme alla proprietà riassuntiva margin.

Sono ammessi valori negativi ed i tipi di valori possibili sono tre:

lughezza

Una misura di lunghezza relativa o assoluta.

percentuale

Una percentuale calcolata rispetto alla larghezza del blocco contenitore del box generato dall'elemento in questione.

auto

Calcolato dal browser.

La proprietà margin permette di riassumere in una sola dichiarazione tutte le proprietà dei margini. Per esempio, la regola seguente:

1. #box {
2. margin-top: 14px;
3. margin-right: 10px;
4. margin-bottom: 12px;
5. margin-left: 16px;
6. }

Può essere riassunta in questa #box { margin: 14px 10px 12px 16px; }.

La sequenza dei valori è sempre antioraria a partire da top, quindi i valori nella regola precedente sono top (14px), right (10px), bottom (12px) e left (16px).

E' possibile abbreviare ulteriormente la sintassi (per ricordarmi le sequenze io memorizzo solo le iniziali, per esempio T R B L per l'esempio precedente):

Nella regola #box { margin: 10px 20px 15px; } il primo valore (10px) si riferisce a top, il secondo valore (20px) a right e left e, infine l'ultimo (15px) a bottom. Per memorizzare: T RL B

Nella regola #box { margin: 10px 20px; } il primo valore si riferisce a top e bottom, mentre il secondo a right e left. Per memorizzare: TB RL.

Chiaramente una regola come #box { margin: 10px; } assegnerà lo stesso valore a tutti i lati.

Combinazione dei margini

I margini verticali adiacenti di due o più box a blocco non si sommano ma sono combinati per dare origine a un singolo margine (collapsing).

La misura del margine risultante è quella più alta tra quelle dei due margini adiacenti.

Se uno dei margini fosse negativo il valore assoluto negativo sarà sottratto al valore positivo.

I margini orizzontali non si combinano mai.

Nel caso, per esempio, di due paragrafi adiacenti, il primo con margin-bottom pari a 20px e il seguente con margin-top pari a 15px non otterremmo un margine totale di 35px (20 + 15) ma "vincerà" il margine più ampio, in questo caso 20px.

Il padding

Il padding è lo spazio esistente tra l'area del contenuto di un elemento e il suo bordo (oppure il suo margine se il bordo è assente ... e se è assente anche il margine?).

Lo sfondo applicato all'elemento (colore o immagine) si espande nell'area del padding.

Le proprietà del padding sono: padding-top, padding-right, padding-bottom, padding-left insieme alla proprietà riassuntiva padding.

Non sono ammessi valori negativi. Le tipologie di valori possibili sono due:

lughezza

Una misura di lunghezza relativa o assoluta.

percentuale

Una percentuale calcolata rispetto alla larghezza del blocco contenitore del box generato dall'elemento.

Il bordo

Il bordo è posizionato tra il padding e il margine di un elemento.

Dimensioni, colore e stile possono essere impostati in diverse combinazioni con il gruppo delle 20 proprietà del bordo.

Le 5 proprietà riassuntive consentono di impostare contemporaneamente dimensioni, colore e stile per uno o più dei 4 bordi di un elemento, esse sono: border-left, border-right, border-top, border-bottom e la proprietà riassuntiva border.

I valori per la larghezza sono:

thin

Genera un bordo sottile.

medium

Genera un bordo di media grandezza.

thick

Genera un bordo spesso.

lunghezza

Un valore espresso in una delle unità di misura CSS. Non sono ammessi valori negativi.

L'interpretazione dei primi tre valori dipende dal browser, ma le relazioni tra i valori devono rimanere costanti.

I valori per il colore del bordo sono:

colore

Una tonalità di colore espressa con una delle notazioni possibili (parola chiave, funzionale o esadecimale).

transparent

Il bordo è trasparente (ma conserva il suo spessore).

Se il colore del bordo non è specificato, il browser applica ad esso il valore della proprietà color associata all'elemento.

I valori per lo stile del bordo sono:

none

Nessun bordo (la larghezza del bordo è pari a 0).

transparent

Simile a none tranne che per la risoluzione del conflitto tra bordi nelle tabelle.

Ci sono infine otto parole chiave:

• dotted
• solid
• dashed
• double
• groove
• ridge
• outset
• inset

L'implementazione delle parole chiave è differente nei vari browser. Le ultime quattro non sono visualizzate correttamente da IE 7 e versioni precedenti quando è assegnato un valore esplicito al colore del bordo, per esempio: border: 4px outset #000;.

IE 6 interpreta in modo scorretto il valore dotted quando la larghezza è impostata a 1px (il bordo è reso dashed). IE 5.0 non supporta il valore dotted (il bordo è reso solid). Neppure IE 7 sembra supportare completamente dotted.

Ecco alcuni esempi di regole per il bordo:

1. #box1 { border: 5px solid #000; }
2. #box2 { border-top: 1px solid #ccc; }
3. #box3 {
4. border-bottom-color: Fuchsia;
5. border-bottom-style: dashed;
6. border-bottom-width: 5px;
7. }

Dimensionamento di un box

Specificare dimensioni esatte

Le proprietà width e height possono essere utilizzate per assegnare dimensioni esplicite all'area del contenuto di un elemento.

I valori possibili sono:

lunghezza

Una misura di lunghezza relativa o assoluta.

percentuale

Una percentuale calcolata rispetto alla larghezza del blocco contenitore del box generato dall'elemento.

auto

Calcolata da browser.

Per approfondire leggere la specifica CSS.

Specificare dimensioni massime e minime

Le proprietà min-width, max-width e min-height, max-height consentono di costringere entro un determinato range le dimensioni del contenuto di un elemento in larghezza e/o altezza consentendo al contenuto di espandersi o contrarsi liberamente entro i limiti impostati.

I valori possibili sono lunghezze o percentuali insieme al valore none (quest'ultimo solo per max-width e max-height).

IE 6 e versioni precedenti non supportano queste proprietà. IE 7 sembra supportarle.

Contribuisci alla serie di articoli Introduzione ai CSS

Note

1. Personalmente preferisco non tradurre in italiano i termini "box" e "box model", per evitare di incappare in obbrobri linguistici come "modello a gabbie" o "gabbia" e simili. E' una questione di gusti [indietro]
2. La risposta è 650 [indietro]
3. La risposta è 600 [indietro]

Tag: box model, CSS, DOCTYPE, Douglas Livingstone, HTML, introduzione ai CSS, Peter-Paul Koch, quirks mode

Questo articolo è stato inviato Saturday 12 January 2008 alle 18:34 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.