CSS, il box model

Secondo le specifiche rilasciate dal W3C sui CSS ogni elemento (sia di blocco che in linea) è racchiuso da un rettangolo (box). A questo rettangolo si fa spesso riferimento con il nome di box model. E' importante imparare i nomi presenti all'interno del modello, in questo modo si apprendono anche i nomi delle proprietà che ne regolano gli aspetti!

L'area dell'elemento (un'immagine oppure un testo scritto, ad esempio) può essere variata modificando le proprietà width ed height che regolano, rispettivamente, larghezza e altezza dell'oggetto incorporato. Attenzione, tali parametri, come vedremo a breve, non caratterizzano l'effettiva estensione dell'oggetto!

Il padding è la distanza che intercorre fra l'elemento incorporato e la sua cornice. Questa distanza può essere modificata agendo sull'omonima proprietà padding, che applica un valore a tutti e quattro i lato della cornice. Tale proprietà è utile, ad esempio, se vogliamo tenere il testo distante dalla cornice. Se invece vogliamo dare un diverso valore per ogni lato possiamo allora ricorrere alle proprietà (singole): padding-top, padding-bottom, padding-left e padding-right. Attenzione, come già dicevo in passato alcune proprietà possono ricevere più valori sulla stessa linea, è questo il caso di padding! Se infatti diamo un solo valore a padding questo viene allora esteso a tutti e quattro i lati. Se diamo a padding due valori (separati da un carattere di spazio) questi, allora, verranno applicati a padding-top e padding-bottom. Ancora, se diamo a padding tre valori essi verranno applicati rispettivamente a padding-top, padding-bottom e l'ultimo valore a padding-left e padding-right. Infine, quindi, se diamo a padding quattro valori essi verranno applicati rispettivamente a padding-top, padding-bottom, padding-left e padding-right.

Anche la proprietà che definisce il bordo della cornice può essere modificata dal web designer, basta assegnare stile (proprietà style), colore (proprietà color) e spessore (width) a border (per applicarla a tutti e quattro i lati della cornice) oppure a border-top, border-bottom, border-left e border-right per applicarla a ogni singolo lato. Anche in questo caso possono essere dati più valori alla singola proprietà border, l'ordine è quello già visto per la proprietà padding.

La proprietà margin definisce la distanza (variabile) che deve esistere fra la cornice dell'elemento e gli altri elementi della pagina, essa è valida per ogni lato dell'oggetto. Le singole distanze da applicare ad ogni lato possono poi essere dettate sia attraverso la proprietà margin (con più valori, nello stesso ordine già visto per padding e border) e sia attraverso le singole proprietà: margin-top, margin-bottom, margin-left e margin-right.

La reale dimensione dell'elemento, come già detto all'inizio, non è quella descritta dalle proprietà width ed height ma è allora la somma di tutti gli spessori e le distanza che fanno da contorno all'oggetto! Per assimilare meglio il modello per un oggetto CSS ho preparato questa immagine: