Ce dessin montre les quatre aires d'une boîte générique en CSS : le contenu, l'espacement, la bordure et les marges.
Il y a quatre boîtes imbriquées : l'aire du contenu est celle la plus intérieure, puis viennent celles de l'espacement, de la bordure et de la marge. Chacune des aires a un style différent pour en distinguer les bords : le bord du contenu est un trait mince, celui de l'espacement est en pointillés fins, celui de la bordure est un trait épais et celui de la marge est en tirets épais.
Sous les boîtes, une légende donne la liste des styles de bordure des quatres bords.