Il box model CSS descrive i box (riquadri) rettangolari generati dagli elementi nell'albero del documento e rappresentati secondo il modello di formattazione visuale.
Dimensioni del box
Ogni box ha un'area di contenuto (testo, immagini, ecc.) e delle aree circostanti di padding, bordo e margine; la dimensione di ciascuna area viene definita dalle proprietà descritte di seguito. L'immagine che segue mostra il box model CSS:
Il margine, bordo e padding possono essere suddivisi nei segmenti superiore (top), destro (right), inferiore (bottom) e sinistro (left). Si tenga a mente quest'ordine, in senso orario: top, right, bottom, left.
Il perimetro di ogni area (contenuto, padding, bordo e margine) viene detto limite, e quindi ciascun box ha quattro limiti:
- limite del contenuto (o limite interno)
- Il limite del contenuto circonda il rettangolo dato dalla larghezza e dall'altezza del box, che spesso dipende dalla quantità di contenuto.
- limite del padding
- Il limite del padding circonda il riquadro del padding. Se il padding è 0, il limite del padding coincide con il limite del contenuto.
- limite del bordo
- Il limite del bordo circonda il riquadro del bordo. Se il bordo è 0, il limite del bordo coincide con il limite del padding.
- limite del margine (o limite esterno)
- Il limite del margine circonda il riquadro del margine. Se il margine è 0, il limite del margine coincide con il limite del bordo.
Lo sfondo dell'area di contenuto, padding e bordo di un box viene specificato dalla proprietà background
dell'elemento che li genera. I margini sono sempre trasparenti.
Proprietà del margine
Le proprietà del margine definiscono la misura dell'area di margine di un box. Esse sono:
margin-top, margin-right, margin-bottom, margin-left e margin.
L'ultima è una proprietà abbreviata che imposta il margine per tutti e quattro i lati.
Queste proprietà si applicano a tutti gli elementi, ma i margini verticali non hanno effetto sugli elementi inline
non rimpiazzati (a, abbr, acronym, dfn, em, span,
strong, ecc.).
Il tipo di valore <margin-width> può avere uno dei seguenti valori:
<length>- Specifica una misura fissa (px, em, ecc.).
<percentage>- Percentuale (%). Viene calcolata in rapporto alla larghezza del blocco contenitore.
auto- Dipende da altri valori.
I margini negativi sono permessi.
| Valore: | <margin-width> | inherit |
|---|---|
| Iniziale: | 0 |
| Si applica a: | tutti gli elementi, eccetto gli elementi con un valore della proprietà display diverso da
table-caption, table e inline-table |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
| Valore calcolato: | la percentuale specificata o la lunghezza assoluta |
Queste proprietà non agiscono sugli elementi inline non rimpiazzati.
| Valore: | <margin-width> | inherit |
|---|---|
| Iniziale: | 0 |
| Si applica a: | vedi sopra |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
| Valore calcolato: | la percentuale specificata o la lunghezza assoluta |
Queste quattro proprietà impostano il margine superiore, destro, inferiore e sinistro di un box:
p {margin-top: 1em; margin-left: 20px;}
| Valore: | <margin-width> {1,4} | inherit |
|---|---|
| Iniziale: | vedi proprietà individuali |
| Si applica a: | vedi sopra |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
| Valore calcolato: | vedi proprietà individuali |
La proprietà abbreviata margin imposta le precedenti quattro proprietà in un'unica dichiarazione.
Accetta da uno a quattro valori. Se c'è un solo valore (1), viene applicato su tutti i lati.
Se ci sono due valori (2), margin-top e margin-bottom vengono impostate sul primo, e
margin-right e margin-left sul secondo.
Se ci sono tre valori (3), margin-top viene impostata sul primo, margin-left e margin-right sul
secondo e margin-bottom sul terzo.
Se ci sono quattro valori (4), si applicano rispettivamente a margin-top, margin-right,
margin-bottom e margin-left:
p {margin: 1em}
p {margin: 1em 0.5em}
p {margin: 1em 0.5em 1em}
p {margin: 1em 0.5em 1em 0.5em }
Margini collassati
Con l'espressione margini collassati si intende che due margini verticali adiacenti si combinano per formare un unico margine. Nei CSS, i margini orizzontali non collassano. Alcune condizioni:
I margini verticali adiacenti di due box di blocco nel flusso normale produrranno un margine la cui misura sarà il massimo delle due misure. Nel caso di margini negativi, il massimo dei valori assoluti negativi viene sottratto dal massimo dei valori positivi. Se non ci sono margini positivi, il massimo dei valori assoluti viene sottratto da zero:
p {margin-bottom: 1em;} div {margin-top: 0.5em;} /* = 1em */ ul {margin-bottom: 2em;} address {margin-top: -1em;} /* = 1em */ h2 {margin-bottom: -1em;} h3 {margin-top: -1em;} /* = -1em */I margini verticali tra un box flottato e un altro box non collassano.
I margini verticali di elementi con
overflowdiverso davisiblenon collassano con i loro discendenti.I margini dei box posizionati in modo assoluto non collassano.
I margini degli elementi inline-block non collassano.
Se i margini di un elemento sono collassati con il margine superiore del genitore, il limite del bordo superiore del box coincide con quello del genitore.
Un elemento con la proprietà
clearnon farà collassare il suo margine superiore con il margine inferiore del suo genitore.I margini del box dell'elemento radice non collassano.
Proprietà del padding
Le proprietà del padding definiscono la larghezza dell'area di padding. Esse sono:
padding-top, padding-right, padding-bottom, padding-left
e padding. Quest'ultima è una proprietà abbreviata con un funzionamento analogo alla proprietà
margin. I tipi di valore accettati da questa proprietà sono analoghi
a quelli delle proprietà del margine, con tre sole differenze: non esiste un valore auto (1); il padding non
può essere negativo (2); il padding non può essere applicato agli elementi tr, thead,
tbody, tfoot. col e colgroup (3).
Proprietà del bordo
Le proprietà del bordo specificano l'ampiezza (1), il colore (2) e lo stile del bordo (3).
L'ampiezza del bordo (1) viene definita con le proprietà
border-top-width, border-right-width, border-bottom-width,
border-left-width e border-width (proprietà abbreviata). Il tipo di valore
<border-width> può essere:
thin- Bordo sottile.
medium- Bordo medio.
thick- Bordo spesso.
<length>- Valore esplicito non negativo.
Le tre parole chiave indicano solo che thin <= medium e medium <= thick, e non un valore uniforme
tra i browser.
| Valore: | <border-width> | inherit |
|---|---|
| Iniziale: | medium |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A (Non Ammesse) |
| Media: | visuale |
| Valore calcolato: | lunghezza assoluta; 0 se lo stile del bordo è none o hidden |
La proprietà abbreviata border-width ha un funzionamento analogo a margin.
Il colore del bordo (2) viene definito dalle proprietà
border-top-color, border-right-color, border-bottom-color,
border-left-color e border-color (proprietà abbreviata).
| Valore: | <color> | transparent | inherit |
|---|---|
| Iniziale: | valore della proprietà color |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | se preso dalla proprietà color, il valore calcolato di color;
altrimenti, come specificato |
I valori sono:
<color>- Specifica un valore di colore (esadecimale, nominale, RGB).
transparent- Il bordo è trasparente.
Se non viene specificato un valore di colore, viene assunto il valore della proprietà color dell'elemento.
La proprietà abbreviata border-color ha un funzionamento analogo a margin.
Lo stile del bordo (3) viene applicato con le proprietà
border-top-style, border-right-style, border-bottom-style,
border-left-style e border-style (proprietà abbreviata).
Gli stili disponibili sono:
none- Valore iniziale (nessun bordo). Se non si imposta uno stile, il bordo non sarà visibile.
hidden- Come il precedente, tranne per le tabellle.
dotted- Bordo punteggiato.
dashed- Bordo tratteggiato.
solid- Bordo continuo.
double- Bordo doppio. Le due righe sommate sono uguali allo spessore del bordo.
groove- Bordo scolpito in dentro.
ridge- Bordo scolpito in fuori.
inset- Bordo incavato.
outset- Bordo sbalzato.
La proprietà abbreviata border-style ha un funzionamento analogo a margin.
Infine, vi sono cinque proprietà abbreviate complessive per i bordi:
border-topborder-rightborder-bottomborder-leftborder
Ciascuna accetta i tre valori di <border-width>, <border-style> e
<border-color>. La proprietà border imposta il bordo su tutti e quattro i lati,
ma non accetta valori separati. Esempi:
div {border-style: solid; border-color: #ccc;} /* lo spessore sarà 'medium' */
blockquote {
border-width: 1px 2px 2px 1px;
border-style: solid;
border-color: #000 #ccc #ccc #000;
} /* top, right, bottom, left */
h1 {border-top: 1px solid #ccc;} /* bordo superiore */
p {border: 2px dashed; color: #000;} /* bordo sui quattro lati; il colore sarà #000 */