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).
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 3, 4, 5, 5.5, 6 | ve velmi složitých konstrukcích (obtékání + pozadí) způsobuje zmizení textu | |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano | nastavení line-height skryje případné obtékané obrázky |
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-heigh 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ů.
Font-size = výška textu, Height = výška prvku, Vertical-align = vertikální umístění na řádku, Font = všechny vlastnosti písma
o tvorbě, údržbě a zlepšování internetových stránek