Box Model

IL BOX MODEL

Una pagina (X)HTML è un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.


Varie componenti del box model:

• l'area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.
• il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
• il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
• il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

http://css.html.it/guide/lezione/28/il-box-model/

Esistono 3 proprietà fondamentali: altezza, larghezza e posizione.

Gestione delle dimensioni: altezza

height

Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento.

selettore {height: valore;}

Valori

• un valore numerico con unità di misura.
• un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come auto.
• auto. L'altezza sarà quella determinata dal contenuto.

http://css.html.it/guide/lezione/33/gestione-delle-dimensioni-altezza/

Gestione delle dimensioni: larghezza

width

selettore {width: valore;}

Valori

• auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore.
• un valore numerico con unità di misura.
• un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore.

http://css.html.it/guide/lezione/34/gestione-delle-dimensioni-larghezza/

I Margini

Sono cinque le proprietà con cui è possibile definire un margine (margin-bottom, margin-left, margin-right, margin-top, margin). Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima,margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.

http://css.html.it/guide/lezione/35/i-margini/