#1 Koncept
Pro jednodušší pracování se stylováním prvků pomocí kaskádových stylů, existuje koncept CSS boxu. Ten funguje tak, že si každý prvek představíme jako box (většinou obdélník), s výšku a šířkou, kde na úplném kraji se nachází margin, za ním border a hned vedle obsahu padding.
#2 Model box
Následující příklad znázorňuje ukázku takovéhoto prvku, i s popisky, kde se jaká část nachází.
V příkladu se nachází:
- obsah – obsah prvku, který je definován šířkou a výškou
- padding – odsazení prvku, které je jeho součástí; zvětšuje prvek
- border – okraj nebo hranice prvku, poslední část, která je součástí prvku
- margin – odsazení prvku, které není jeho součástí; čistí prostor kole prvku
Obdélník s vlastnostmi jako je ten výše, lze zobrazit v kódu takto:
<div id="box">Obsah prvku</div>
#box {
width: 130px;
height: 50px;
padding: 5px;
margin: 5px;
border: 5px solid #9AB100;
}
Výsledný model
I když je výška a šířka prvku jasně definována, všechny další části prvku jej zvětšují. Pokud chceme znát výsledné rozměry, je potřeba si je dopočítat. Z kódu výše by nám vyšlo:
Původní šířka je 130 px, k čemuž se přidává 10px padding (levý + pravý), 5px margin (levý + pravý) a 5px border (levý + pravý) – ve výsledku je šířka prvku 160 px. Obdobně to je také s výškou, která bude mít ve finále 80 px.