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íkali šířku celého bloku, 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áměčků a vyplní zkoumaného bloku. Výsledná hodnota se pak použoje 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.

Související témata

Chyba v MSIE, resp. v jeho starších verzích

zpět: bloky