Tutti gli elementi HTML all'interno del DOM possono essere considerate "scatole" (box), ovvero dei rettangoli, posizionate e visualizzate all'interno della pagine in base a determinate proprietà (posizionamento, floating, dimensioni, ecc.).

Il termine "box model" di CSS si riferisce alla generazione di un insieme di rettangoli da parte del browser per determinare il layout complessivo di un elemento. Possiamo immaginare questa struttura come una serie di scatole contenuta l'una nell'altra, come i pezzi di una matrioska.

L'ordine di contenimento, a partire dall'elemento più interno fino a quello più esterno (dalla scatola più piccola fino alla più grande nella metafora del box model) è il seguente:

• content: il contenuto vero e proprio (ad esempio il testo) dell'elemento;
• padding: la spaziatura tra i bordi e il contenuto;
• border: il bordo dell'elemento;
• margin: la spaziatura tra l'elemento e gli elementi circostanti.

Lo spazio totale occupato dall'elemento all'interno della pagina è determinato dalla somma di questi singoli valori.

L'altezza complessiva è calcolata come: margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom.

La larghezza complessiva è calcolata come: margin-left + border-left-with + padding-left + width + padding-right + border-right-width + margin-right.

Il box model di CSS3 è descritto nella relativa specifica disponibile sul sito del W3C all'indirizzo http://www.w3.org/TR/css3-box/