A CSS doboz modell bemutatása
A HTML dokumentumokban minden téglalap alakú. (Ami nem annak látszik, az grafikai trükk.) Pontosabban fogalmazva: A böngészők egy HTML dokumentum tartalmi egységeinek megjelenítése során generálnak egy-egy téglalap alakú dobozt minden egység számára. Ilyen szempontból tartalmi egységnek számít a teljes HTML dokumentum, egy táblázat, egy kép, egy bekezdésnyi szöveg, egy szó a mondatban, stb.
Minden doboznak van margója (angolul margin), kerete (border, magyarra szegélynek is szokták fordítani) és helykitöltése (padding, magyarul a belső margó kifejezés is használatos). Ha valamelyiknek 0 a szélessége, az nincs megjelenítve.
Példa: A tartalom egy bekezdésnyi szöveg a következőképpen formázva:
<p style="background-color: #ffff00; padding: 20px;
border-width: 10px; border-color: #000088; border-style: solid;
margin: 20px">
Ami ilyen stílusban jelenik meg:
Ez egy pár soros szöveg, ami a CSS doboz modellt mutatja be. A háttérszín citromsárga, 20 pixel a helykitöltés, 10 pixel széles a keret sötétkék színnel és folytonos vonallal rajzolva, a margó 20 pixel széles (világoskék színnel).
A következő példában a tartalom a webkalap.hu logója a fentivel megegyező stílusban:
<img src="../../elemek/kalaplogo.gif" width="335" height="90"
alt="Logó" title="Logó"
style="background-color: #ffff00; padding: 20px;
border-width: 10px; border-color: #000088; border-style: solid;
margin: 20px">
Ami így jelenik meg: