CSS – Rozměry bloku

Pomocí kaskádových stylů můžete samozřejmě ovlivňovat i rozměry jednotlivých bloků. A kromě toho definují způsob, jak rozměry stanovit v případech, kdy autor jejich velikost nijak neurčil.

Šířka

Základní vlastnost pro stanovení šířky bloku se nepříliš překvapivě jmenuje width. Ovšem pozor, stanoví šířku obsahu. Abyste získali celkovou šířku místa zabraného blokem, musíte k hodnotě width přičíst ještě šířky levé a pravé výplně, rámečku a okraje, jak ilustruje následující obrázek:

Hodnotou width může být konkrétní délka (např. 200px) nebo klíčové slovo auto. Ve druhém případě se blok roztáhne na šířku tak, aby zabral veškerý dostupný prostor. Exaktněji řečeno: hodnota auto znamená, že šířka bloku bude určena shora tak zvaným obsahujícím blokem. Právě auto je výchozí hodnotou vlastnosti width.

Obsahující blok

Stručně řečeno obsahující blok je blok vytvořený rodičem prvku, jenž zkoumáme. Čili pokud například XHTML kód stránky obsahuje

<div>
<p>...<p>
<p>...<p>
</div>

je pro bloky obou odstavců obsahujícím blokem blok vytvořený prvkem <div>. Šířka (obsahu) bloku se pak vypočte tak, že se nejprve určí šířka (obsahu) jeho obsahujícího bloku a od ní se odečtou šířky okrajů, rámečků a vyplní zkoumaného bloku. Výsledná hodnota se pak použije pro formátování jeho obsahu.

Kdyby se k výše uvedenému zdrojovému kódu vztahoval předpis

div {
    width: 10em;
}
p {
    margin: 0.5em;
    padding: 0.5em;
    color: white;
    background-color: #048;
}

bude obsah obou odstavců formátován na šířku 8 em, protože z šířky 10 em přiřazené obsahujícímu <div> ukousnou po polovině em levý okraj, levá výplň, pravá výplň a pravý okraj, dohromady 2 em. Modrá oblast však bude široká 9 em, protože výplň má stejnou barvu pozadí jako obsah bloku. Ostatně – podívejte se jak to vypadá v praxi.

Pokud má omezující blok také vlastnost width nastavenu na auto, postupuje se pro něj obdobným způsobem. Takto se určování šířky postupně šplhá do vyšších a vyšších pater stromu prvků tvořících WWW stránku, až dorazí buď k prvku, jemuž byla šířka nastavena na konkrétní hodnotu, nebo k rodičovskému prvku <body>. Jeho šířka je dána šířkou okna WWW klienta (případně šířkou papíru či obecně média použitého pro zobrazení stránky).

Šířka je tedy omezována shora – její nastavení se promítne do šířky všech potomků prvku, jemuž jste ji určili.

Výška

Ke stanovení výšky slouží vlastnost height. Základní fakta jsou stejná jako pro šířku – hodnota height se týká samotného obsahu bloku, k určení jeho celkové výšky je třeba k ní přičíst ještě rozměry příslušných okrajů, rámečků a výplní.

Podstatně odlišné je ale chování hodnoty auto. V případě výšky se automatické určení přizpůsobí velikosti obsahu bloku. Jednoduše jej roztáhne na výšku tak, aby se do něj vešel celý jeho obsah. Na rozdíl od šířky tedy automatické určení výšky postupuje zdola – určí se výška vnořeného bloku, k ní se přičtou jeho výplně, rámečky a okraje a výsledek poslouží pro výpočet výšky jeho obsahujícího bloku. Proto ve výše uvedeném příkladu je nejprve vypočtena výška obou odstavců a z nich je pak odvozena výška <div>, který je obsahuje.

box-sizing

Skutečnost, že blok často zabere větší prostor než určují jeho width a height, je pro řadu autorů matoucí. Například chcete mít dva bloky vedle sebe. Nastavíte-li jim width: 50% a nenulový padding, nevejdou se. Lze to řešit pomocí funkce calc() a od šířky odečíst velikost výplně, tedy něco jako width: calc(50% - 1rem). Není to ale moc pohodlné a při změně padding bude třeba vzorec upravit.

Opakované stížnosti na toto neintuitivní chování vedly k zavedení vlastnosti box-sizing, která řídí, jak se počítají rozměry bloku. K dispozici jsou dvě hodnoty:

content-box je tradiční způsob, kdy width určuje šířku samotného obsahu bez výplně a rámečku. Toto je výchozí hodnota vlastnosti, aby se zachovala zpětná kompatibilita.
border-box zahrnuje do rozměrů i výplň a rámeček. width určuje, kolik měří součet vlastního obsahu bloku, levé a pravé výplně a tloušťky levého a pravého rámečku. Často bývá praktičtější.

Podívejte se na ukázku účinku vlastnosti box-sizing.

Vlastnost můžete nastavit libovolnému prvku a nedědí se. Většinou ale chcete, aby se všechny prvky chovaly konzistentně, takže v CSS často bývá pravidlo:

*   {
    box-sizing: border-box;
}

zpět: bloky