Box Model je základním konceptem v Cascading Style Sheets (CSS), který popisuje způsob, jakým jsou HTML elementy zobrazeny na webové stránce. Každý HTML element lze považovat za box, který se skládá ze čtyř hlavních částí: obsahu (content), výplně (padding), rámečku (border) a okraje (margin). Tento model určuje, jak se velikost elementu vypočítává a jak elementy na stránce interagují mezi sebou v prostoru. Porozumění Box Modelu je klíčové pro efektivní návrh a layout webových stránek.
1. Obsah (Content)
Obsah je základní částí každého boxu, kde se nachází samotný obsah elementu, jako je text nebo obrázky. Velikost obsahu je definována vlastnostmi width (šířka) a height (výška). Tyto vlastnosti určují velikost oblasti obsahu, nezahrnují však padding, border nebo margin.
2. Výplň (Padding)
Výplň je prostor mezi obsahem a rámečkem. Padding zvětšuje prostor uvnitř boxu a může být definován pro každou stranu elementu samostatně (padding-top, padding-right, padding-bottom, padding-left) nebo souhrnně pomocí zkrácené vlastnosti padding. Padding je vždy průhledný a neovlivňuje barvu pozadí elementu.
3. Rámeček (Border)
Rámeček obklopuje padding a obsah a definuje vizuální hranici elementu. Jeho tloušťka, styl a barva se nastavují pomocí vlastností border-width, border-style a border-color. Podobně jako u paddingu, i zde je možné nastavení upravit pro každou stranu elementu zvlášť.
4. Okraj (Margin)
Okraj je prostor mezi rámečkem jednoho boxu a sousedními boxy. Na rozdíl od paddingu, margin může být také záporný, což umožňuje překrývání elementů. Vlastnosti pro nastavení okrajů jsou margin-top, margin-right, margin-bottom, margin-left nebo zkráceně margin. Okraje nejsou nikdy průhledné a neobsahují barvu pozadí.
Box-Sizing: Přizpůsobení modelu
Standardní box model (box-sizing: content-box) určuje, že width a height se vztahují pouze na obsah, nikoli na padding, border nebo margin. Toto chování může vést k neintuitivním rozměrům elementů, zejména když je použit padding nebo border. CSS3 představilo vlastnost box-sizing, která umožňuje změnu tohoto chování. Hodnota box-sizing: border-box znamená, že šířka a výška elementu nyní zahrnují i padding a border, což zjednodušuje layout design.
Porozumění box modelu je zásadní pro každého webdesignéra a vývojáře, jelikož umožňuje precizní kontrolu nad layoutem a rozložením elementů na webové stránce. Vlastnosti jako margin, border, padding, a width a height hrají klíčovou roli v definování prostoru, který element zaujímá, a jeho vztahu k ostatním elementům. Práce s box modelem a jeho správné využití vede k efektivnímu a vizuálně přitažlivému designu webových stránek.
