Introduzione al box model in CSS

Quando un browser presenta un documento HTML all'utente,  il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del box model di CSS. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.
 

Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.

CSS Box model

L'area del contenuto, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.

Se la proprietà box-sizing (en-US) è impostata su content-box ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà width (en-US), min-width, max-width (en-US), height (en-US), min-height (en-US), e max-height (en-US).

L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.

lo spessore del padding è determinato tramite le proprietà padding-top (en-US), padding-right (en-US), padding-bottom (en-US), padding-left (en-US), o usando la forma abbreviata padding (en-US).

L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.

Lo spessore dei bordi è determinato tramite la proprietà border-width (en-US), o usando la forma abbreviata border. Se la proprietà box-sizing (en-US) è impostata su  border-box, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà width (en-US), min-width, max-width (en-US), height (en-US), min-height (en-US), e max-height (en-US).

L'area del margine, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate margin-box width e margin-box height.

Le dimensioni dell'area del margine sono determinate tramite le proprietà margin-top (en-US), margin-right (en-US), margin-bottom (en-US), margin-left (en-US), o usando la forma abbreviata margin (en-US). Quando si verifica un caso di margini che collassano (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.

Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>)  e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà line-height (en-US), anche se i bordi e il padding sono comunque mostrati attorno al contenuto.

Specifiche

Specifiche Stato Commenti
CSS Level 2 (Revision 1) Recommendation Descrizione più precisa, ma nessun cambio a livello pratico.
CSS Level 1 Recommendation Definizione iniziale.

Vedi anche