Vytváření webových stránek není jen o hezkých barvách a stylu, ale také o správné struktuře a uspořádání. A právě zde hraje klíčovou roli CSS Box Model – jeden z nejdůležitějších konceptů v oblasti webového designu. Pochopení tohoto modelu je pro profesionální front-endové vývojáře nezbytné.

Co je CSS Box Model?

CSS Box Model definuje, jak se prvky na webové stránce chovají a jak jsou zobrazeny. Každý prvek na stránce, ať už je to odstavec textu, obrázek nebo div, je reprezentován jako obdélník, který se skládá z několika vrstev.

Box model se skládá ze čtyř hlavních komponent:

1. Content (obsah) – Tato vrstva obsahuje skutečný obsah prvku, jako je text, obrázky nebo jiný vložený obsah.
2. Padding (vnitřní okraj) – Prostor mezi obsahem a hranicí boxu. Padding má za úkol oddělit obsah od hranic prvku.
3. Border (orámování) – Obal kolem paddingu a obsahu, který může být viditelný, když je definován v CSS. Můžete nastavovat jeho tloušťku, styl a barvu.
4. Margin (vnější okraj) – Prostor mezi prvkem a ostatními prvky kolem něj. Na rozdíl od paddingu, margin zasahuje mimo hranici boxu a vytváří prostor mezi jednotlivými boxy.

Lépe to vysvětlí tento obrázek:

Nyní si detailněji rozebereme všechny části tohoto modelu.