A weboldal minden eleme egy téglalap alakú területen jelenik meg. Ha írunk egy bekezdést, beszúrunk egy táblázatot vagy egy képet, akkor ezek mind egy téglalap alakú területet, egy „dobozt” fognak elfoglalni a weboldalon. Ehhez a dobozhoz a W3C szabványának megfelelőn hozzárendelhetünk belső margót (padding), szegélyt (border), illetve margót (margin). Ezek a téglalap alakú területet elfoglaló tartalmat keretként veszik körül, a tartalomtól kifelé haladva, a felsorolt sorrendben.

Az alábbi ábra illusztrálja a dobozmodellt. A belső margón megjelenik a háttér, ha van. Utána a szegély következik valamilyen stílusban, majd végül a margó, ami átlátszó, ezért a szülő elem háttere fog rajta megjelenni. Az ábrában az is látszik, hogy az egyes területeket melyik CSS tulajdonsággal tudjuk elérni.