10 Il modello di formattazione visuale in dettaglio

Sommario

10.1 Definizione di "blocco contenitore"

La posizione e la dimensione del riquadrato (o dei riquadrati) di un elemento sono a volte calcolati in relazione ad un determinato rettangolo, chiamato blocco contenitore dell'elemento. Il blocco contenitore di un elemento è definito come segue:

  1. Il blocco contenitore (chiamato blocco contenitore iniziale) in cui vive l'elemento radice è scelto dal programma utente.
  2. Per gli altri elementi, a meno che l'elemento non sia posizionato in modo assoluto, il blocco contenitore è formato dal limite del contenuto del riquadrato antenato a livello di blocco che è più prossimo .
  3. Se l'elemento ha 'position: fixed', il blocco contenitore è stabilito dalla finestra di visualizzazione.
  4. Se l'elemento ha 'position: absolute', il blocco contenitore è stabilito dall'antenato più prossimo con 'position' diversa da 'static', nel modo seguente:
    1. Nel caso che l'antenato sia a livello di blocco, il blocco contenitore è formato dal limite del cuscinetto [padding] dell'antenato.
    2. Nel caso che l'antenato sia a livello di riga, il blocco contenitore dipende dalla proprietà 'direction' dell'antenato:
      1. Se 'direction' è 'ltr', la parte superiore e sinistra del blocco contenitore sono i limiti superiore e sinistro del contenuto del primo riquadrato generato dall'antenato, e la parte inferiore e destra sono i limiti inferiore e destro del contenuto dell'ultimo riquadrato dell'antenato.
      2. Se 'direction' è 'rtl', la parte superiore e destra sono i limiti superiore e destro del primo riquadrato generato dall'antenato, e la parte inferiore e sinistra sono i limiti inferiore e sinistro del contenuto dell'ultimo riquadrato dell'antenato.

    Se non vi è un tale antenato, il limite del contenuto del riquadrato dell'elemento radice stabilisce il blocco contenitore.

Esempi(o):

Senza posizionamento, i blocchi contenitori (B.C.) nel seguente documento:

<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

sono stabiliti come segue:

Per il riquadrato generato da B.C. è stabilito da
bodyB.C. iniziale (dipendente dal programma utente)
div1body
p1div1
p2div1
em1p2
strong1p2

Se posizioniamo "div1":

   #div1 { position: absolute; left: 50px; top: 50px }

il suo blocco contenitore non è più "body"; diventa il blocco contenitore iniziale (poichè non vi sono altri riquadrati antenati posizionati).

Se posizioniamo anche "em1":

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

la tavola dei blocchi contenitori diviene:

Per il riquadrato generato da B.C. è stabilito da
bodyB.C. iniziale
div1B.C. iniziale
p1div1
p2div1
em1div1
strong1em1

Posizionando "em1", il suo blocco contenitore diviene il riquadrato antenato posizionato più prossimo (ossia quello generato da "div1").

10.2 La larghezza del contenuto: la proprietà 'width'

'width'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  tutti gli elementi eccetto gli elementi in riga non-rimpiazzati, righe di tabella, e gruppi di riga
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Questa proprietà specifica la larghezza del contenuto dei riquadrati generati da elementi a livello di blocco e rimpiazzati.

Questa proprietà non si applica agli elementi a livello di riga non-rimpiazzati. La larghezza dei riquadrati di un elemento in riga non-rimpiazzato è quella del contenuto reso al loro interno (prima di ogni spostamento relativo dei figli). Fa tornare il flusso di questi riquadrati in riga in riquadrati di riga. La larghezza dei riquadrati di riga è data dal loro blocco contenitore, ma può essere ridotta dalla presenza dei flottanti.

La larghezza del riquadrato di un elemento rimpiazzato è intrinseca è può essere scalata dal programma utente se il valore di questa proprietà è diverso da 'auto'.

I valori hanno i seguenti significati:

<length>
Specifica una larghezza fissa.
<percentage>
Specifica una larghezza percentuale. La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato.
auto
La larghezza dipende dal valore di altre proprietà. Si vedano le sezioni sotto.

Valori negativi per 'width' non sono validi.

Esempi(o):

Per esempio, la seguente regola fissa la larghezza del contenuto dei paragrafi a 100 pixel:

P { width: 100px }

10.3 Calcolare larghezze e margini

I valori calcolati per un elemento delle proprietà 'width', 'margin-left', 'margin-right', 'left' e 'right' dipendono dal tipo di riquadrato generato e da altro. Di principio, i valori calcolati sono gli stessi dei valori specificati, con 'auto' sostituito da un valore adatto, ma vi sono delle eccezioni. Le seguenti situazioni vanno distinte:

  1. elementi in riga non-rimpiazzati
  2. elementi in riga rimpiazzati
  3. elementi a livello di blocco non-rimpiazzati nel flusso normale
  4. elementi a livello di blocco rimpiazzati nel flusso normale
  5. elementi flottanti non-rimpiazzati
  6. elementi flottanti rimpiazzati
  7. elementi posizionati in modo assoluto non-rimpiazzati
  8. elementi posizionati in modo assoluto rimpiazzati

I punti da 1 a 6 includono il posizionamento relativo.

10.3.1 Elementi in riga non rimpiazzati

La proprietà 'width' non si applica. Un valore specificato di 'auto' for 'left', 'right', 'margin-left' o 'margin-right' diviene un valore calcolato di '0'.

10.3.2 Elementi in riga rimpiazzati

Un valore specificato di 'auto' per 'left', 'right', 'margin-left' o 'margin-right' diviene un valore calcolato di '0'. Un valore specificato di 'auto' per 'width' restituisce la larghezza intrinseca dell'elemento come valore calcolato.

10.3.3 Elementi a livello di blocco non-rimpiazzati nel flusso normale

Se 'left' o 'right' sono dati come 'auto', il loro valore calcolato è 0. Le seguenti restrizioni devono essere mantenute fra le altre proprietà:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = larghezza del blocco contenitore

(Se lo stile del bordo è 'none', si usi '0' come larghezza del bordo.) Se tutte le precedenti proprietà hanno un valore specificato diverso da 'auto', si dice che i valori sono "super-vincolate" e uno dei valori calcolati dovrà essere differente dal suo valore specificato. Se la proprietà 'direction' ha il valore 'ltr', il valore specificato di 'margin-right' viene ignorato e il valore è calcolato in modo da rendere vera l'uguaglianza. Se il valore di 'direction' è 'ltr', questo accade invece a 'margin-left'.

Se vi è esattamente un valore specificato come 'auto', il suo valore calcolato consegue dall'uguaglianza.

Se 'width' viene impostata su 'auto', ogni altro valore 'auto' diviene '0' e 'width' consegue dalla risultante uguaglianza.

Se 'margin-left' e 'margin-right' sono 'auto', i loro valori calcolati sono uguali.

10.3.4 Elementi a livello di blocco rimpiazzati nel flusso normale

Se 'left' o 'right' sono 'auto', il loro valore calcolato è 0. Se 'width' viene specificata come 'auto', il suo valore è la larghezza intrinseca dell'elemento. Se uno dei margini è 'auto', il suo valore calcolato è dato dalle restrizioni di cui sopra. Inoltre, se entrambi i margini sono 'auto', i loro valori calcolati sono uguali.

10.3.5 Elementi flottanti non-rimpiazzati

Se 'left', 'right', 'width', 'margin-left', o 'margin-right' sono specificati come 'auto', il loro valore calcolato è '0'.

10.3.6 Elementi flottanti rimpiazzati

Se 'left', 'right', 'margin-left' o 'margin-right' sono specificati come 'auto', il loro valore calcolato è '0'. Se 'width' è 'auto', il suo valore è la larghezza intrinseca dell'elemento.

10.3.7 Elementi posizionati in modo assoluto non-rimpiazzati

La restrizione che determina i valori calcolati per questi elementi è:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = larghezza del blocco contenitore

(Se lo stile del bordo è 'none', si usi '0' come larghezza del bordo.) La soluzione a questa restrizione è raggiunta attraverso un numero di sostituzioni nel seguente ordine:

  1. Se 'left' ha il valore 'auto' mentre 'direction' è 'ltr', si sostituisca 'auto' con la distanza dal limite sinistro del blocco contenitore al limite del margine sinistro di un riquadrato ipotetico che sarebbe stato il primo riquadrato dell'elemento se la sua proprietà 'position' fosse stata 'static'. (Ma piuttosto che calcolare davvero quel riquadrato, i programmi utente sono liberi di fare un'ipotesi sulla sua probabile posizione.) Il valore è negativo se il riquadrato ipotetico si trova alla sinistra del blocco contenitore.
  2. Se 'right' ha il valore 'auto' mentre 'direction' è 'rtl', si sostituisca 'auto' con la distanza dal limite destro del blocco contenitore al limite del margine destro del medesimo riquadrato ipotetico di cui sopra. Il valore è positivo se il riquadrato ipotetico si trova alla sinistra del limite del blocco contenitore.
  3. Se 'width' è 'auto', si sostituisca ogni rimanente 'auto' per 'left' o 'right' con '0'.
  4. Se 'left', 'right' o 'width' sono (ancora) 'auto', si sostituisca ogni 'auto' su 'margin-left' o 'margin-right' con '0'.
  5. Se a questo punto 'margin-left' e 'margin-right' sono ancora 'auto', si risolva l'equazione con la restrizione extra secondo cui i due margini devono ottenere uguali valori.
  6. Se a questo punto è rimasto solo un 'auto', si risolva l'equazione per quel valore.
  7. Se a questo punto i valori sono super-vincolati, si ignori il valore per 'left' (nel caso che 'direction' sia 'rtl') o 'right' (nel caso che 'direction' sia 'ltr') e si risolva per quel valore.

10.3.8 Elementi posizionati in modo assoluto rimpiazzati

Questa situazione è simile alla precedente, tranne per il fatto che l'elemento ha una larghezzaintrinseca. La sequenza delle sostituzioni è ora:

  1. Se 'width' è 'auto', si sostituisca la larghezza intrinseca dell'elemento.
  2. Se 'left' ha il valore 'auto' mentre 'direction' è 'ltr', si sostituisca 'auto' con la distanza dal limite sinistro del blocco contenitore al limite del margine sinistro di un ipotetico riquadrato che sarebbe stato il primo riquadrato dell'elemento se la sua proprietà 'position' fosse stata 'static'. (Ma piuttosto che calcolare davvero quel riquadrato, i programmi utente sono liberi di fare un'ipotesi sulla sua probabile posizione.) Il valore è negativo se il riquadrato ipotetico si trova alla sinistra del blocco contenitore.
  3. Se 'right' ha il valore 'auto' mentre 'direction' è 'rtl', si sostituisca 'auto' con la distanza dal limite destro del blocco contenitore al limite del margine destro del medesimo riquadrato ipotetico di cui sopra. Il valore è positivo se il riquadrato ipotetico si trova alla sinistra del limite del blocco contenitore.
  4. Se 'left' o 'right' sono 'auto', si sostituisca ogni 'auto' su 'margin-left' o 'margin-right' con '0'.
  5. Se a questo punto 'margin-left' e 'margin-right' sono ancora 'auto', si risolva l'equazione con la restrizione extra secondo cui i due margini devono ottenere uguali valori.
  6. Se a questo punto vi è rimasto solo un 'auto', si risolva l'equazione per quel valore.
  7. Se a questo punto i valori sono super-vincolati, si ignori il valore per 'left' (nel caso che 'direction' sia 'rtl') o 'right' (nel caso che 'direction' sia 'ltr') e si risolva per quel valore.

10.4 Larghezza minima e massima: 'min-width' e 'max-width'

'min-width'
Valore:  <length> | <percentage> | inherit
Iniziale:  dipende dal programma utente
Si applica a:  tutti gli elementi eccetto gli elementi in riga non-rimpiazzati e gli elementi di tabella
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale
'max-width'
Valore:  <length> | <percentage> | none | inherit
Iniziale:  none
Applies to:  tutti gli elementi eccetto gli elementi in riga non-rimpiazzati e gli elementi di tabella
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Queste due proprietà permettono agli autori di vincolare le larghezze dei riquadrati ad un determinato campo di variabilità [range, qui tradotto nell'accezione matematica del termine]. I valori hanno i seguenti significati:

<length>
Specifica una larghezza fissa calcolata minima e massima.
<percentage>
Specifica una percentuale per determinare il valore calcolato. La percentuale è calcolata rispetto alla larghezza del blocco contenitore del riquadrato generato.
none
(Solo per 'max-width') Nessun limite alla larghezza del riquadrato.

Il seguente algoritmo descrive come le due proprietà influenzano il valore calcolato della proprietà 'width':

  1. La larghezza è calcolata (senza 'min-width' e 'max-width') seguendo le regole descritte in "Calcolare larghezze e margini" di cui sopra.
  2. Se il valore calcolato di 'min-width' è maggiore del valore di 'max-width', 'max-width' è impostata sul valore di 'min-width'.
  3. Se il valore calcolato è maggiore di 'max-width', le regole di cui sopra sono di nuovo applicate, ma questa volta usando il valore di 'max-width' come valore specificato per 'width'.
  4. Se il valore calcolato è minore di 'min-width', le regole di cui sopra sono di nuovo applicate, ma questa volta usando il valore di 'min-width' come valore specificato 'width'.

Il programma utente può definire un valore minimo non-negativo per la proprietà 'min-width', che può variare da elemento ad elemento e dipendere anche da altre proprietà. Se 'min-width' va sotto questo limite, o perchè è stata impostata esplicitamente, o perchè era 'auto' e le regole di cui sotto l'avrebbero resa troppo piccola, il programma utente può usare il valore minimo come valore calcolato.

10.5 L'altezza del contenuto: la proprietà 'height'

'height'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  tutti gli elementi ecetto elementi in riga non-rimpiazzati, colonne di tabella, e gruppi di colonna
Ereditata:  no
Percentuali:  si veda il testo
Media:  visuale

Questa proprietà specifica l'altezza del contenuto dei riquadrati generati da elementi a livello di blocco ed elementi rimpiazzati.

Questa proprietà non si applica agli elementi non-rimpiazzati a livello di riga. L'altezza di riquadrati di elementi in riga non-rimpiazzati è data dal valore (possibilmente ereditato) 'line-height' dell'elemento.

I valori hanno i seguenti significati:

<length>
Specifica un'altezza fissa.
<percentage>
Specifica un'altezza in percentuale. La percentuale è calcolata rispetto all'altezza del blocco contenitore del riquadrato generato. Se l'altezza del blocco contenitore non viene specificata esplicitamente (ossia dipende dall'altezza del contenuto), il valore è interpretato come 'auto'.
auto
L'altezza dipende dai valori di altre proprietà. Si veda il testo di cui sotto.

Valori negativi per 'height' non sono validi.

Esempi(o):

Per esempio, la seguente regola fissa l'altezza dei paragrafi a 100 pixel:

P { height: 100px }

Paragrafi che richiedono più di 100 pixel di altezza eccederanno secondo la proprietà 'overflow'.

10.6 Calcolare altezze e margini

Per calcolare i valori di 'top', 'margin-top', 'height', 'margin-bottom', e 'bottom' bisogna fare una distinzione fra varie specie di riquadrati:

  1. elementi in riga non-rimpiazzati
  2. elementi in riga rimpiazzati
  3. elementi a livello di blocco non-rimpiazzati nel flusso normale
  4. elementi a livello di blocco rimpiazzati nel flusso normale
  5. elementi flottanti non-rimpiazzati
  6. elementi flottanti rimpiazzati
  7. elementi posizionati in modo assoluto non-rimpiazzati
  8. elementi posizionati in modo assoluto rimpiazzati

I punti da 1 a 6 includono il posizionamento relativo.

10.6.1 Elementi in riga non-rimpiazzati

Se 'top', 'bottom', 'margin-top', o 'margin-bottom' sono 'auto', il loro valore calcolato è 0. La proprietà 'height' non si applica, ma l'altezza del riquadrato è data dalla proprietà 'line-height'.

10.6.2 Elementi in riga rimpiazzati; elementi a livello di blocco rimpiazzati nel flusso normale; elementi flottanti rimpiazzati

Se 'top', 'bottom', 'margin-top', o 'margin-bottom' sono 'auto', il loro valore calcolato è 0. Se 'height' è 'auto', il valore calcolato è l'altezza intrinseca.

10.6.3 Elementi a livello di blocco non-rimpiazzati nel flusso normale; elementi flottanti non-rimpiazzati

Se 'top', 'bottom', 'margin-top', o 'margin-bottom' sono 'auto', il loro valore calcolato è 0. Se 'height' è 'auto', l'altezza dipende dal fatto che l'elemento abbia dei figli a livello di blocco. Se ha solo figli a livello di riga, l'altezza è dalla parte superiore del riquadrato di riga più in alto alla parte inferiore del riquadrato di riga più in basso. Se ha figli a livello di blocco, l'altezza è la distanza dalla parte superiore del limite del bordo del riquadrato figlio a livello di blocco che si trova più in alto, alla parte inferiore del limite del bordo del riquadrato figlio che si trova più in basso. Solo i figli nel flusso normale sono presi in considerazione (ossia i riquadrati flottanti e i riquadrati posizionati in modo assoluto sono ignorati, e i riquadrati posizionati in modo relativo sono considerati senza il loro spostamento). Si noti che il riquadrato figlio può essere un riquadrato anonimo.

10.6.4 Elementi posizionati in modo assoluto non-rimpiazzati

Per gli elementi posizionati in modo assoluto, le dimensioni verticali devono soddisfare questa restrizione:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = altezza del blocco contenitore

(Se lo stile del bordo è 'none', si usi '0' come larghezza del bordo.) La soluzione a quest restrizione è raggiunta attraverso un numero di sostituzioni nel seguente ordine:

  1. Se 'top' ha il valore 'auto' si sostituisca con la distanza fra il limite superiore del blocco contenitore e il limite del margine superiore di un ipotetico riquadrato che sarebbe stato il primo riquadrato dell'elemento se la sua proprietà 'position' fosse stata 'static'. (Ma piuttosto che calcolare veramente quel riquadrato, i programmi utente sono liberi di fare un'ipotesi sulla sua probabile posizione.) Il valore è negativo se il riquadrato ipotetico è sopra il blocco contenitore.
  2. Se 'height' e 'bottom' sono 'auto', si sostituisca 'bottom' con 0.
  3. Se 'bottom' o 'height' sono (ancora) 'auto', si sotituisca ogni 'auto' su 'margin-top' o 'margin-bottom' con '0'.
  4. Se a questo punto 'margin-top' e 'margin-bottom' sono ancora 'auto', si risolva l'equazione con la restrizione extra secondo cui i due margini devono ottenere uguali valori.
  5. Se a questo punto è rimasto un solo 'auto', si risolva l'equazione per quel valore.
  6. Se a questo punto i valori sono super-vincolati, si ignori il valore per 'bottom' e si risolva per quel valore.

10.6.5 Elementi posizionati in modo assoluto rimpiazzati

Questa situazione è simile alla precedente, tranne per il fatto che l'elemento ha un'altezza intrinseca. La sequenza di sostituzioni è ora:

  1. Se 'height' è 'auto', si sostituisca l'altezza intrinseca dell'elemento.
  2. Se 'top' ha il valore 'auto', si sostituisca con la distanza fra il limite superiore del blocco contenitore e il limite del margine superiore di un ipotetico riquadrato che sarebbe stato il primo riquadrato dell'elemento se la sua proprietà 'position' fosse stata 'static'. (Ma piuttosto che calcolare veramente quel riquadrato, i programmi utente sono liberi di fare un'ipotesi sulla sua probabile posizione.) Il valore è negativo se il riquadrato ipotetico è sopra il blocco contenitore.
  3. Se 'bottom' è 'auto', si sostituisca ogni 'auto' su 'margin-top' o 'margin-bottom' con '0'.
  4. Se a questo punto 'margin-top' e 'margin-bottom' sono ancora 'auto', si risolva l'equazione con la restrizione extra secondo cui i due margini devono ottenere uguali valori.
  5. Se a questo punto è rimasto un solo 'auto', si risolva l'equazione per quel valore.
  6. Se a questo punto i valori sono super-vincolati, si ingori il valore per 'bottom' e si risolva per quel valore.

10.7 Altezza minima e massima: 'min-height' e 'max-height'

A volte è utile vincolare l'altezza degli elementi ad un determinato campo di variabilità. Due proprietà offrono questa funzionalità:

'min-height'
Valore:  <length> | <percentage> | inherit
Iniziale:  0
Si applica a:  tutti gli elementi eccetto gli elementi in riga non-rimpiazzati e gli elementi di tabella
Ereditata:  no
Percentuali:  in riferimento all'altezza del blocco contenitore
Media:  visuale
'max-height'
Valore:  <length> | <percentage> | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi eccetto gli elementi in riga non-rimpiazzati e gli elementi di tabella
Ereditata:  no
Percentuali:  in riferimento all'altezza del blocco contenitore
Media:  visuale

Queste due proprietà consentono agli autori di vincolare le altezze dei riquadrati ad un determinato campo di variabilità. I valori hanno i seguenti significati:

<length>
Specifica un'altezza fissa calcolata minima o massima.
<percentage>
Specifica una percentuale per determinare il valore calcolato. La percentuale è calcolata rispetto all'altezza del blocco contenitore del riquadrato generato. Se l'altezza del blocco contenitore non è specificata esplicitamente (ossia dipende dall'altezza del contenuto), il valore percentuale è interpretato come 'auto'.
none
(Solo su 'max-height') Nessun limite all'altezza del riquadrato.

Il seguente algoritmo descrive come le due proprietà influenzano il valore calcolato della proprietà 'height':

  1. L'altezza è calcolata (senza 'min-height' e 'max-height') seguendo le regole descritte in "Calcolare altezze e margini" di cui sopra.
  2. Se il valore calcolato di 'min-height' è maggiore del valore di 'max-height', 'max-height' è impostata sul valore di 'min-height'.
  3. Se l'altezza calcolata è maggiore di 'max-height', le regole di cui sopra sono applicate di nuovo, ma questa volta usando il valore di 'max-height' come il valore specificato per 'height'.
  4. Se l'altezza calcolata è minore di 'min-height', le regole di cui sopra sono applicate di nuovo, ma questa volta usando il valore di 'min-height' come il valore specificato per 'height'.

10.8 Calcolare l'altezza di riga: le proprietà 'line-height' e 'vertical-align'

Come descritto nella sezione sui contesti di formattazione in riga, i programmi utente fanno fluire i riquadrati in riga in uno strato verticale di riquadrati di riga. L'altezza di un riquadrato di riga è determinato come segue:

  1. L'altezza di ogni riquadrato in riga nel riquadrato di riga viene calcolata (si veda "Calcolare altezze e margini" e la proprietà 'line-height').
  2. I riquadrati in riga sono allineati verticalmente secondo la loro proprietà 'vertical-align'.
  3. L'altezza del riquadrato di riga è la distanza fra la parte superiore più alta del riquadrato e la sua parte inferiore più bassa.

Elementi in riga vuoti generano riquadrati in riga vuoti, ma questi riquadrati hanno ancora margini, cuscinetto [padding], bordi e un'altezza di riga, e così influenzano questi calcoli proprio come gli elementi con contenuto.

Si noti che se tutti i riquadrati nel riquadrato di riga sono allineati lungo la loro parte inferiore, il riquadrato in riga sarà esattamente l'altezza del riquadrato più alto. Tuttavia, se i riquadrati sono allineati lungo una riga di base comune, le parti superiore ed inferiore del riquadrato di riga possono non toccare la parte superiore ed inferiore del riquadrato più alto.

10.8.1 Interlinea e semi-interlinea

Poichè l'altezza di un riquadrato in riga può essere differente dalla dimensione del font [carattere] del testo nel riquadrato (per esempio 'line-height' > 1em), può esserci dello spazio sopra e sotto i caratteri resi. La differenza fra la dimensione del font e il valore calcolato di 'line-height' è chiamato interlinea. La metà è chiamata semi-interlinea.

I programmi utente centrano i caratteri verticalmente in un riquadrato in riga, aggiungendo la semi-interlinea sulla parte superiore ed inferiore . Per esempio, se una parte di testo è alta '12pt' e il valore di 'line-height' è '14pt', dovrebbero essere aggiunti 2pt di spazio extra: 1pt sopra e 1pt sotto le lettere. (Questo si applica anche ai riquadrati vuoti, come se il riquadrato vuoto contenesse una lettera infinitamente stretta.)

Quando il valore di 'line-height' è minore della dimensione del font, l'altezza finale del riquadrato in riga sarà minore della dimensione del font e i caratteri resi si "spanderanno" fuori dal riquadrato. Se un tale riquadrato tocca il limite di un riquadrato di riga, anche in questo caso i caratteri resi si "spanderanno" nel riquadrato di riga adiacente.

Sebbene i margini, i bordi e il cuscinetto [padding] di elementi non-rimpiazzati non rientrano nel calcolo dell'altezza del riquadrato in riga (e la stessa cosa vale per il calcolo del riquadrato di riga), vengono ancora resi intorno ai riquadrati in riga. Questo significa che se l'altezza di un riquadrato di riga è minore dei limiti esterni dei riquadrati che contiene, gli sfondi e i colori del cuscinetto [padding] e dei bordi possono "spandersi" nei riquadrati di riga adiacenti. Tuttavia, in questo caso, alcuni programmi utente possono usare il riquadrato di riga per "ritagliare" [clip] le aree di bordo e di cuscinetto [padding] (ossia non renderle).

'line-height'
Valore:  normal | <number> | <length> | <percentage> | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  in riferimento alla dimensione del font dell'elemento stesso
Media:  visuale

Se la proprietà è impostata su un elemento a livello di blocco il cui contenuto è composto da elementi a livello di riga, essa specifica l'altezza minima di ogni riquadrato in riga generato.

Se la proprietà è impostata su un elemento a livello di riga, essa specifica l'altezza esatta di ciascun riquadrato generato dall'elemento . (Eccetto per gli elementi in riga rimpiazzati, dove l'altezza del riquadrato è data dalla proprietà 'height'.)

I valori per questa proprietà hanno i seguenti significati:

normal
Dice ai programmi utente di impostare il valore calcolato su un valore "ragionevole" basato sulla dimensione del font dell'elemento. Il valore ha lo stesso significato di <number>. Raccomandiamo un valore calcolato per 'normal' fra 1.0 e 1.2.
<length>
L'altezza del riquadrato è impostata su questa lunghezza. Valori negativi non sono validi.
<number>
Il valore calcolato della proprietà è questo numero moltiplicato per la dimensione del font dell'elemento. Valori negativi non sono validi. Tuttavia il numero, non il valore calcolato, è ereditato.
<percentage>
Il valore calcolato della proprietà è questa percentuale moltiplicata per la dimensione calcolata del font dell'elemento. Valori negativi non sono validi.

Esempi(o):

Le tre regole nell'esempio di sotto restituiscono la medesima altezza di riga risultante:

DIV { line-height: 1.2; font-size: 10pt }     /* number */
DIV { line-height: 1.2em; font-size: 10pt }   /* length */
DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Quando un elemento contiene del testo che viene reso in più di un font, i programmi utente dovrebbero determinare il valore di 'line-height' secondo la dimensione del font più ampia.

Generalmente, quando c'è un solo valore di 'line-height' per tutti i riquadrati in riga in un paragrafo (e nessuna immagine), quello superiore assicurerà che le righe di base delle righe successive siano esattamente distinte dalla 'line-height'. Questo è importante quando colonne di testo con font differenti devono essere allineate, per esempio in una tabella.

Si noti che gli elementi rimpiazzati hanno una proprietà 'font-size' e 'line-height', anche se non sono usati direttamente per determinare l'altezza di un riquadrato. La 'font-size' è usata, tuttavia, per definire le unità 'em' e 'ex', e 'line-height' ha un ruolo nella proprietà 'vertical-align'.

'vertical-align'
Valore:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Iniziale:  baseline
Si applica a:  elementi a livello di riga e 'table-cell'
Ereditata:  no
Percentuali:  in riferimento alla 'line-height' dell'elemento stesso
Media:  visuale

Questa proprietà influenza il posizionamento verticale all'interno di un riquadrato di riga dei riquadrati generati da un elemento a livello di riga. I seguenti valori hanno significato rispetto all'elemento genitore a livello di riga, o all'elemento genitore a livello di blocco, se questo elemento genera riquadrati in riga anonimi; non hanno effetto se non esiste un tale genitore.

Nota. I valori di questa proprietà hanno significati lievemente differenti nel contesto delle tabelle. Si prega di consultare la sezione sugli algoritimi dell'altezza di tabella per i dettagli.

baseline
Allinea la riga di base di un riquadrato con la riga di base del riquadrato genitore. Se il riquadrato non ha una riga di base, allinea la parte inferiore del riquadrato con la riga di base del genitore.
middle
Allinea il punto medio verticale del riquadrato con la riga di base del riquadrato genitore più metà dell'altezza-x [x-height] del genitore.
sub
Abbassa la riga di base del riquadrato alla giusta posizione per i pedici [subscripts] del riquadrato del genitore. (Questo valore non ha effetto sulla dimensione del font del testo dell'elemento.)
super
Alza la riga di base del riquadrato alla giusta posizione per gli apici [superscripts] del riquadrato del genitore. (Questo valore non ha effetto sulla dimensione del font del testo dell'elemento.)
text-top
Allinea la parte superiore del riquadrato con la parte superiore del font dell'elemento genitore.
text-bottom
Allinea la parte inferiore del riquadrato con la parte inferiore del font dell'elemento genitore.
<percentage>
Alza (valore positivo) o abbassa (valore negativo) il riquadrato secondo questa distanza (una percentuale del valore di 'line-height'). Il valore '0%' è lo stesso che 'baseline'.
<length>
Alza (valore positivo) o abbassa (valore negativo) il riquadrato secondo questa distanza. Il valore '0cm' è lo stesso che 'baseline'.

I rimanenti valori si riferiscono al riquadrato di riga in cui compare il riquadrato generato:

top
Allinea la parte superiore del riquadrato con la parte superiore del riquadrato di riga.
bottom
Allinea la parte inferiore del riquadrato con la parte inferiore del riquadrato di riga.