8 Il modello per riquadrati [box model]

Sommario

Il modello per riquadrati [box] CSS descrive i riquadrati rettangolari che vengono generati per gli elementi nell'albero del documento e rappresentati secondo il modello di formattazione visuale. Il riquadrato di pagina è un tipo speciale di riquadrato che è descritto in dettaglio nella sezione sui media a pagine.

8.1 Dimensioni del riquadrato

Ogni riquadrato ha un' area di contenuto (per esempio del testo, un'immagine, ecc.) e un cuscinetto [padding] opzionale che lo circonda, un bordo, e aree di margine; la dimensione di ogni area è specificata dalle proprietà definite di seguito. Il seguente diagramma illustra come queste aree si relazionano e la terminologia usata per far riferimento alle parti di margine, bordo, e cuscinetto [padding]:

Immagine che illustra la relazione fra contenuto, cuscinetto, bordi, e margini.   [D]

Il margine, bordo, e cuscinetto [padding] si possono dividere nei segmenti sinistro [left], destro [right], superiore [top], ed inferiore [bottom] (per esempio, nel diagramma, "LM" sta per left margin [margine sinistro], "RP" per right padding [cuscinetto destro], "TB" per top border [bordo superiore], ecc.).

Il perimetro di ognuna delle quattro aree (contenuto, cuscinetto, bordo, e margine) è chiamata "limite" [edge], sicchè ogni riquadrato ha quattro limiti:

limite [edge] del contenuto o limite interno
Il limite del contenuto circonda il contenuto reso dell'elemento.
limite del cuscinetto
Il limite del cuscinetto circonda il cuscinetto del riquadrato. Se il cuscinetto ha una larghezza pari a 0, il limite del cuscinetto è lo stesso del limite del contenuto. Il limite del cuscinetto di un riquadrato definisce i limiti del blocco contenitore definito dal riquadrato.
limite del bordo
Il limite del bordo circonda il bordo del riquadrato. Se il bordo ha una larghezza pari a 0, il limite del bordo è lo stesso del limite del cuscinetto.
limite del margine o limite esterno
Il limite del margine circonda il margine del riquadrato. Se il margine ha una larghezza pari a 0, il limite del margine è lo stesso del limite del bordo.

Ogni limite può essere diviso in limite sinistro [left], destro [right], superiore [top], e inferiore [bottom].

Le dimensioni dell'area di contenuto di un riquadrato -- la larghezza del contenuto e l'altezza del contenuto -- dipendono da diversi fattori: se l'elemento che genera il riquadrato ha la proprietà 'width' o 'height' impostata [width sta per "larghezza", height per "altezza"; questi termini ricorreranno in seguito nelle specifiche], se il riquadrato contiene testo o altri riquadrati, se il riquadrato è una tabella, ecc. Le larghezze e le altezze del riquadrato sono discusse nel capitolo sui dettagli del modello di formattazione visuale.

La larghezza [width] del riquadrato è data dalla somma dei margini sinistro e destro, dal bordo sinistro e destro e dal cuscinetto sinistro e destro, nonchè dalla larghezza del contenuto. L'altezza [height] è data dalla somma dei margini superiore ed inferiore, dal bordo superiore ed inferiore e dal cuscinetto superiore ed inferiore, nonchè dall'altezza del contenuto.

Lo stile dello sfondo [background] delle varie aree di un riquadrato è determinato come segue:

8.2 Esempio di margini, cuscinetto [padding], e bordi

Questo esempio illustra come margini, cuscinetto [padding], e bordi interagiscono. Il documento HTML di esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is longer
           to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

risulta in un albero del documento con (fra le altre relazioni) un elemento UL che ha due figli LI.

Il primo dei seguenti diagrammi illustra cosa produrrà questo esempio. Il secondo illustra la relazione fra i margini, il cuscinetto, e i bordi degli elementi UL e quelli dei suoi elementi figli LI.

Immagine che illustra come si relazionano i margini, bordi e cuscinetto del
genitore e del figlio.   [D]

Si noti che:

8.3 Proprietà dei margini: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', e 'margin'

Le proprietà dei margini specificano l'ampiezza dell' area di margine di un riquadrato. La proprietà stenografica [shorthand. se il lettore non è abituato al termine, per comodità di studio si può far riferimento a queste proprietà come a proprietà abbreviate] 'margin' imposta il margine per tutti e quattro i lati mentre le altre proprietà dei margini lo impostano solo per il loro rispettivo lato.

Le proprietà definite in questa sezione si riferiscono al tipo di valore <margin-width>, che può assumere uno dei seguenti valori:

<length>
Specifica un'ampiezza fissa.
<percentage>
La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato. Questo è vero per 'margin-top' e 'margin-bottom', eccetto nel contesto di pagina, dove le percentuali si riferiscono all'altezza del riquadrato di pagina.
auto
Si veda la sezione sul calcolo delle larghezze e dei margini per il comportamento.

Sono consentiti valori negativi per le proprietà dei margini, ma possono esservi limit nell'implementazione specifica.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Valore:  <margin-width> | inherit
Iniziale:  0
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Queste proprietà impostano il margine superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.

Esempi(o):

H1 { margin-top: 2em }
'margin'
Valore:  <margin-width>{1,4} | inherit
Iniziale:  non definita per le proprietà stenografiche
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

La proprietà 'margin' è una proprietà stenografica per impostare 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' nella medesima posizione nel foglio di stile.

Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i margini superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i margini destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].

Esempi(o):

BODY { margin: 2em }         /* all margins set to 2em */
BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

L'ultima regola dell'esempio di sopra è equivalente all'esempio di sotto:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

8.3.1 Collassare i margini

In queste specifiche, l'espressione collassare i margini [collapsing margins] significa che margini adiacenti (non li separa nessuna area di bordo o cuscinetto) di due o più riquadrati (che possono essere vicini l'uno all'altro o annidati) si combinano per formare un singolo margine.

Nei CSS2, i margini orizzontali non collassano mai.

I margini verticali possono collassare fra determinati riquadrati:

Si prega di consultare gli esempi di margine, cuscinetto, e bordi per l'illustrazione di margini collassati [collapsed].

8.4 Proprietà del cuscinetto: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', e 'padding'

Le proprietà del cuscinetto specificano l'ampiezza dell'area del cuscinetto di un riquadrato. La proprietà stenografica 'padding' imposta il cuscinetto per tutti e quattro i lati mentre le altre proprietà del cuscinetto la impostano solo per il loro rispettivo lato.

Le proprietà definite in questa sezione si riferiscono al tipo di valore<padding-width> , che può assumere uno dei seguenti valori:

<length>
Specifica un'ampiezza fissa.
<percentage>
La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato, anche per 'padding-top' e 'padding-bottom'.

A differenza delle proprietà dei margini, i valori per il cuscinetto non possono essere negativi. Similmente alle proprietà dei margini, i valori di percentuale per le proprietà del cuscinetto si riferiscono all'ampiezza del blocco contenitore del riquadrato generato.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Valore:  <padding-width> | inherit
Iniziale:  0
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Queste proprietà impostano il cuscinetto superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.

Esempi(o):

BLOCKQUOTE { padding-top: 0.3em }
'padding'
Valore:  <padding-width>{1,4} | inherit
Iniziale:  non definito per le proprietà stenografiche
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

La proprietà 'padding' è una proprietà stenografica per impostare 'padding-top', 'padding-right', 'padding-bottom', e 'padding-left' nella medesima posizione nel foglio di stile.

Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i cuscinetti superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i cuscinetti destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].

Il colore della superficie o immagine dell'area del cuscinetto è specificata con la proprietà 'background':

Esempi(o):

H1 { 
  background: white; 
  padding: 1em 2em;
} 

L'esempio di sopra specifica un cuscinetto verticale di '1em' ('padding-top' e 'padding-bottom') e un cuscinetto orizzontale di '2em' ('padding-right' e 'padding-left'). L'unità 'em' è relativa alla dimensione del font [carattere] dell'elemento: '1em' è uguale alla dimensione del font [carattere] in uso.

8.5 Proprietà dei bordi

Le proprietà dei bordi specificano l'ampiezza, il colore, e lo stile dell'area del bordo di un riquadrato. Queste proprietà si applicano a tutti gli elementi.

Nota. È da notare per l'HTML, che i programmi utente possono rendere i bordi per alcuni elementi (per esempio bottoni, menu, ecc.) in modo differente rispetto agli elementi "ordinari".

8.5.1 Larghezza dei bordi: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', e 'border-width'

Le proprietà per la larghezza dei bordi specificano la larghezza dell'area del bordo. Le proprietà definite in questa sezione si riferiscono al tipo di valore <border-width>, che può assumere uno dei seguenti valori:

thin
Un bordo sottile.
medium
Un bordo medio.
thick
Un bordo spesso.
<length>
Lo spessore del bordo ha un valore esplicito. Ampiezze esplicite del bordo non possono essere negative.

L'interpretazione dei primi tre valori dipende dal programma utente. Le seguenti relazioni, tuttavia, devono essere mantenute:

'thin' <='medium' <= 'thick'.

Inoltre queste larghezze devono essere costanti per tutto il documento.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Valore:  <border-width> | inherit
Iniziale:  medium
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Queste proprietà impostano la larghezza del bordo superiore [top], destro [right], inferiore [bottom], e sinistro [left] di un riquadrato.

'border-width'
Valore:  <border-width>{1,4} | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà è una proprietà stenografica per impostare 'border-top-width', 'border-right-width', 'border-bottom-width', e 'border-left-width' nella medesima posizione nel foglio di stile.

Se c'è un solo valore, si applica a tutti i lati. Se ci sono due valori, i bordi superiore[top] ed inferiore [bottom] sono impostati sul primo valore e i bordi destro [right] e sinistro [left] sono impostati sul secondo. Se ci sono tre valori, il superiore [top] è impostato sul primo valore, il sinistro [left e destro [right] sono impostati sul secondo, e l'inferiore [bottom] è impostato sul terzo. Se ci sono quattro valori, si applicano rispettivamente al superiore [top], destro [right], inferiore [bottom] e sinistro [left].

Esempi(o):

Nell'esempio di sotto, i commenti indicano le larghezze risultanti dei bordi superiore [top], destro [right], inferiore [bottom], e sinistro [left]:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 Colore dei bordi: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', e 'border-color'

Le proprietà del colore dei bordi specificano il colore del bordo di un riquadrato.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Valore:  <color> | inherit
Iniziale:  il valore della proprietà 'color'
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale
'border-color'
Valore:  <color>{1,4} | transparent | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

La proprietà 'border-color' imposta il colore dei quattro bordi. I valori hanno i seguenti significati:

<color>
Specifica un valore di colore.
transparent
Il bordo è trasparente (sebbene possa avere larghezza).

La proprietà 'border-color' può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width'.

Se il colore del bordo di un elemento non è specificato con una proprietà del bordo, i programmi utente devono usare il valore della proprietà 'color' dell'elemento come il valore calcolato per il colore del bordo.

Esempi(o):

In questo esempio, il bordo sarà una linea nera solida.

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 Stile dei bordi: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', e 'border-style'

Le proprietà dello stile dei bordi specificano lo stile della linea del bordo di un riquadrato (solid, double, dashed, ecc.). Le proprietà definite in questa sezione si riferiscono al tipo di valore <border-style>, che può assumere uno dei seguenti:

none
Nessun bordo. Questo valore forza il valore calcolato di 'border-width' a '0'.
hidden
Lo stesso che 'none', tranne nei termini di risoluzione di conflitti tra bordi per gli elementi di tabella.
dotted
Il bordo è una serie di punti.
dashed
Il bordo è una serie di brevi segmenti di linea.
solid
Il bordo è un singolo segmento di linea continuo.
double
Il bordo è composto di due linee solide. La somma delle due linee e dello spazio fra di esse eguaglia il valore della 'border-width'.
groove
Il bordo appare come se fosse scolpito in un riquadro [letteralmente, into the canvas].
ridge
L'opposto di 'groove': il bordo appare come se uscisse dal riquadro.
inset
Il bordo fa sembrare l'intero riquadrato come se fosse incastonato nel riquadro.
outset
L'opposto di 'inset': il bordo fa sembrare l'intero riquadrato come se fosse sbalzato rispetto al riquadro.

Tutti i bordi sono disegnati sopra lo sfondo di un riquadrato. Il colore dei bordi tracciati per i valori di 'groove', 'ridge', 'inset', e 'outset' dipende dalla proprietà 'color' dell'elemento.

I programmi utente HTML conformi possono interpretare 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', e 'outset' come 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Valore:  <border-style> | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale
'border-style'
Valore:  <border-style>{1,4} | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

La proprietà 'border-style' imposta lo stile dei quattro bordi. Può avere da uno a quattro valori, e i valori sono impostati sui differenti lati come per 'border-width' di sopra.

Esempi(o):

#xy34 { border-style: solid dotted }

Nell'esempio di sopra, i bordi orizzontali saranno 'solid' e i bordi verticali saranno 'dotted'.

Poichè il valore iniziale degli stili dei bordi è 'none', nessun bordo sarà visibile fin quando non si imposta lo stile dei bordi.

8.5.4 Proprietà stenografiche dei bordi: 'border-top', 'border-bottom', 'border-right', 'border-left', e 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'
Valore:  [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa è una proprietà stenografica per impostare la larghezza, lo stile e il colore del bordo superiore [top], destro [right], inferiore [bottom], e sinistro [left di un riquadrato.

Esempi(o):

H1 { border-bottom: thick solid red }

La regola di sopra imposterà la larghezza, lo stile ed il colore del bordo sotto l'elemento H1. I valori omessi vengono impostati ai loro valori iniziali. Poichè la regola che segue non specifica un colore del bordo, il bordo avrà il colore specificato dalla proprietà 'color':

H1 { border-bottom: thick solid }
'border'
Valore:  [ <'border-width'> || <'border-style'> || <color> ] | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

La proprietà 'border' è una proprietà stenografica per impostare insieme la larghezza, il colore e lo stile per tutti e quattro i bordi di un riquadrato. Diversamente dalle proprietà stenografiche 'margin' e 'padding', la proprietà 'border' non può impostare differenti valori sui quattro bordi. Se si vuole fare questo, si devono usare una o più di una delle altre proprietà dei bordi.

Esempi(o):

Per esempio, la prima regola qui sotto è equivalente all'insieme delle quattro regole dopo di lei:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

Poichè in una certa misura, le proprietà hanno funzionalità che si sovrappongono, l'ordine con cui le regole vengono specificate è importante.

Esempi(o):

Si consideri questo esempio:

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

Nell'esempio di sopra, il colore del bordo sinistro è nero, mentre gli altri bordi sono rossi. Questo è dovuto a 'border-left' che imposta la larghezza, lo stile ed il colore. Poichè il valore di colore non è dato dalla proprietà 'border-left', verrà preso dalla proprietà 'color'. Il fatto che la proprietà 'color' è impostata dopo la proprietà 'border-left' non è rilevante.