Ogni elemento di una pagina html è sostanzialmente un contenitore rettangolare che possiede specifiche proprietà:

• un contenuto
• un bordo
• un padding
• un margin

In generale, il contenuto è l’elemento che riempe il box. Può essere un testo o un altro elemento contenitore e fondamentalmente ha una sua altezza, definita come width e una sua altezza definita height.
Lo spazio tra il limite estremo del contenuto e il bordo del contenitore viene chiamato padding. Generalmente, uno sfondo applicato ad un contenuto, si estende naturalmente anche al padding che lo circonda rendendo lo spazio interno visivamente più ampio.
Il bordo del contenitore che costituisce il suo limite, può avere una dimensione, un colore e uno stile.
Lo spazio esterno tra il bordo e gli altri elementi di una pagina viene chiamato margin.

Bisogna tenere presente che:

• la maggior parte di queste proprietà possono essere modificate solo per elementi blocco e non per elementi inline
• tra due elementi che si trovano uno sopra l’altro, il margin inferiore di quello che sta sopra non viene sommato al margin superiore dell’altro, bensì viene applicato solo quello che tra i due risulta maggiore
• parlare di dimensioni del contenitore, non significa parlare di dimensioni del contenuto. La larghezza totale è infatti il risultato della somma di tutte le proprietà sino ad ora esaminate mentre la larghezza del contenuto è esclusivamente quella impostata tramite width ed height.