Sommario
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:
Se non vi è un tale antenato, il limite del contenuto del riquadrato dell'elemento radice stabilisce il blocco contenitore.
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 |
|---|---|
| body | B.C. iniziale (dipendente dal programma utente) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
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 |
|---|---|
| body | B.C. iniziale |
| div1 | B.C. iniziale |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
Posizionando "em1", il suo blocco contenitore diviene il riquadrato antenato posizionato più prossimo (ossia quello generato da "div1").
| 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:
Valori negativi per 'width' non sono validi.
Per esempio, la seguente regola fissa la larghezza del contenuto dei paragrafi a 100 pixel:
P { width: 100px }
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:
I punti da 1 a 6 includono il posizionamento relativo.
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'.
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.
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.
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.
Se 'left', 'right', 'width', 'margin-left', o 'margin-right' sono specificati come 'auto', il loro valore calcolato è '0'.
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.
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:
Questa situazione è simile alla precedente, tranne per il fatto che l'elemento ha una larghezzaintrinseca. La sequenza delle sostituzioni è ora:
| 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 |
| 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:
Il seguente algoritmo descrive come le due proprietà influenzano il valore calcolato della proprietà '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.
| 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:
Valori negativi per 'height' non sono validi.
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'.
Per calcolare i valori di 'top', 'margin-top', 'height', 'margin-bottom', e 'bottom' bisogna fare una distinzione fra varie specie di riquadrati:
I punti da 1 a 6 includono il posizionamento relativo.
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'.
Se 'top', 'bottom', 'margin-top', o 'margin-bottom' sono 'auto', il loro valore calcolato è 0. Se 'height' è 'auto', il valore calcolato è l'altezza intrinseca.
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.
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:
Questa situazione è simile alla precedente, tranne per il fatto che l'elemento ha un'altezza intrinseca. La sequenza di sostituzioni è ora:
A volte è utile vincolare l'altezza degli elementi ad un determinato campo di variabilità. Due proprietà offrono questa funzionalità:
| 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 |
| 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:
Il seguente algoritmo descrive come le due proprietà influenzano il valore calcolato della proprietà 'height':
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:
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.
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).
| 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:
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'.
| 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.
I rimanenti valori si riferiscono al riquadrato di riga in cui compare il riquadrato generato: