CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

IL BOX MODEL

GESTIONE DELLE DIMENSIONI: LARGHEZZA

La definizione della larghezza è in genere più problematica rispetto alla gestione della larghezza.

1) width

Abbiamo già avuto modo di vedere come le dimensioni orizzontali di un elemento sono date dalla combinazione di varie proprietà. Un errore macroscopico quindi è ritenere che essa sia definita semplicemente dalla proprietà width. In pratica, bisogna sempre distinguere tra la larghezza effettiva di un elemento (i pixel di spazio che occupa sulla pagina) e la larghezza dell'area del contenuto. La prima è data dalla somma di questi valori:

margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro

La seconda è impostata tramite la proprietà width.

Da notare che Explorer per Windows fino alla versione 5.5 interpreta male il concetto di width. Nel senso che con questa proprietà intende la larghezza globale dell'elemento, compresi i margini, padding e bordi. Se nel documento, infatti, non si usa nessun DOCTYPE il browser di Microsoft funziona in modalità retro-compatibile, ripetendo bug ed errori dei suoi predecessori.

Fatta questa fondamentale premessa, possiamo analizzare nei dettagli la proprietà.

Sintassi

selettore {width: <valore>;}

Valori

La proprietà width non è ereditata.

Per verificare il funzionamento delle varie impostazioni disponiamo della consueta pagina di esempi