CSS Tutoriál IX. – Výška a šířka

V tomto díle se podíváme podrobněji na nastavení výšky a šířky objektu. Jak je ovlivňuje padding a border a jak si můžeme ulehčit práci.

Jak už víme, šířku objektu nastavujeme vlastností width, kterou buď zadáváme v pixelech nebo v procentech. Stejně tak výšku zadáváme vlastností height, také v pixelech a nebo procentech. Problém nastává, pokud přidáváme do objektu také nějaký padding. Uveďme si to na příkladu – když nastavíme totiž width: 500px a padding:5px, celková šířka bude nakonec 510 px. Stejně tak, pokud nastavujeme objektu nějaké ohraničení – border, tak bude celková šířka objektu větší, právě o tu hodotu border. Pokud bychom tedy pokračovali s příkladem našeho divu s width:500px a padding: 5 px, akorát k němu přidali ještě border 2 px, bude celková šířka dokonce 514 px.

Problém s tímto nastává hlavně pokud vkládáme objekt do nějakého divu o nějaké šířce. Pokud mají totiž oba nějaké ohraničení, i když mají stejnou šířku, bude vložený div „přečuhovat“. Tento problém se dá vyřešit v zásadě dvěma způsoby – buďto si pohrajeme s procenty šířky – např místo 100% dáme objektu width: 94% a nebo změníme šířku v pixelech. To ale není to zcela nejsprávnější řešení, které se nám nabízí. Kromě toho ne vždy trefíme nastavení přesně. Právě proto se nám nabízí možnost nové CSS 3 vlastnosti box-sizing.

Pokud totiž nastavíme nějakému elementu box-sizing: border-box,  znamená to, že width bude konečná hodnota. Uveďme si to na příkladu vnořených sekcí.

<div style="width: 500px; height: 500px; border-width: 5 px">
<div style=" width: 500px; height:500px; border-width: 5px">
</div></div>

Takto by nám vnořená sekce přečuhovala z rodičovského elementu. Pokud však zadáme vlastnost box-sizing, vše se nám vejde a nic přečuhovat nebude:

<div style="width: 500px; height: 500px; border-width: 10px">
<div style="width: 500px; height: 500px; border-width: 10px; box-sizing: border-box">
</div></div>

Další věc o které bychom se mohli zmínit je přetékání textu. Pokud máme nastavenou nějakou šířku a výšku objektu  (uveďme si opět na příkladu nějaké sekce – např <div>) a máme v něm nějaký text nebo jiný obsah, který nám přetéká, můžeme pomocí různých vlastností nastavit jednak jak nám bude přetékat a jestli nám bude přetékat. Tyto možnosti nastavujeme pomocí vlastností overflow-x, overflow-y, overflow-style.

Overflow-x nám nastavuje, jak se má prvek chovat, je li jeho obsah šiřší než je jeho šířka. Jeho možné hodnoty jsou: visible – obsah je vidět celý, i když přesahuje sekci, hidden – ten obsah, který přesahuje definovanou šířku není vidět, není možné scrollovat do stran, scroll – přesahující část je možné vidět při scrollování do strany, no-display – pokud obsah přesahuje, celá sekce nebude vidět, no-content – pokud obsah přesahuje. nebude nic z obsahu vidět.

Overflow-y je prakticky totéž se stejnými hodnotami, akorát že tato hodnota nám mluví o výšce objektu.

Overflow-style nám specifikuje jak přesně můžeme scrollovat v přetékajícím objektu. Tato vlastnost ale není zatím podporována žádným z browserů a proto je zbytečné si o ní povídat víc.

Mohli bychom si v této souvislosti ještě říci o vlastnosti resize, která nám umožňuje nastavit, jaké prvky na stránce může uživatel roztáhnout. Jejími hodnotami je none – prvek nelze roztáhnout vůbec, both – lze roztáhnout do výšky i do šířky. horizontal – lze roztáhnout pouze do šířky a vertical – lze roztáhnout pouze do výšky.