Line-height
CSS vlastnost line-height určuje výšku řádku.
| hodnoty | výška řádku |
|---|---|
| normal | výška řádku bude normální - tak vysoká, jak je nejvyšší prvek na řádku |
| délka | výška řádku nastavená napevno, nejčastěji v pixelech |
| procento | procento normální výšky, např. line-height: 150% |
| číslo | násobek normální výšky, např. line-height: 1.5 |
Velká výška řádku je perfektní způsob, jak zvýšit čitelnost textu. U běžného textu doporučuji zadávat minimálně line-height: 130% (totéž, co line-height: 1.3), ale klidně i víc. Hodnota zadávaná násobkem nebo procenty se odvozuje od velikosti textu (vlastnost font-size).
Vlastnost line-height se velmi často použije ve webdesignu namísto hodnoty height. Pro určitá menu, seznamy, odkazy, je totiž univerzálnější, protože se vztahuje i na řádkové elementy (kdežto výška height jenom na blokové).
Hodnotu pro line-height lze zadat také pomocí vlastnosti font (za lomítkem za velikostí textu).
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | všechny verze | ve velmi složitých konstrukcích (obtékání + pozadí) způsobuje zmizení textu |
| Firefox | všechny verze | |
| Opera | všechny verze | |
| Chrome | ano |
Příklady
Asi nejčastěji se nastavení výšky řádku použije u odstavců textu (tag <p>). Nastavení pro všechny odstavce ve stránce:
<style>
p {line-height: 150%}
</style>
Stejně působí zápis line-height: 1.5 a ve většině případů je to myslím totéž jako line-height: 1.5em.
Kdybych chtěl vertikálně prostrkat jenom některé odstavce ve stránce, je dobré udělat si na to třídu (class="prostrkana"):
<style>
.prostrkana {line-height: 2}
</style>
takovému zvýšení řádku na dvojnásobek se říká tisk "ob řádek". Do html by se to zadalo pomocí atributu class:
<p class="prostrkana">Text tohoto odstavce bude mít velmi vysoké řádky</p>
Vlasntost line-height se velmi často hodí jako náhrada za vlastnost height (výška), pokud tato z nějakých (zpravidla magických) důvodů nefunguje. Zapište si to za uši, určitě se s tím setkáte u nadpisů a velmi nízkých prvků.
Bug
Internet Explorer 6 (a možná i pozdější) nedokáže nastavit line-height mezi dvěma řádky, které každé obsahují checkbox (<input type="checkbox">) a možná i jiné formulářové prvky. V takovém případě je potřeba použít padding, což je pěkná otrava.
Reklama
