Line-height

CSS vlastnost line-height určuje výšku řádku.

line-height
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

Podpora vlastnosti line-height
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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.