Výška čiary - Triky CSS | Almanach CSS 2025

line-heightVlastnosť definuje množstvo priestoru nad a pod inline prvkov. Teda prvky, ktoré sú nastavené na display: inlinealebo display: inline-block. Táto vlastnosť sa najčastejšie používa na nastavenie začiatku riadkov textu.

p ( line-height: 1.5; )

Toto line-heightubytovacie zariadenie akceptuje hodnoty kľúčového slova normalalebo nonepočet, dĺžku alebo percento.

Podľa špecifikácie hodnota „normálny“ nie je iba jedna konkrétna hodnota, ktorá sa aplikuje na všetky prvky, ale skôr sa počíta na „primeranú“ hodnotu v závislosti od množiny písma nastavenej (alebo zdedenej) na prvku.

Hodnotu dĺžky je možné definovať pomocou ľubovoľnej platnej jednotky CSS (px, em, rem atď.).

Percentuálna hodnota je veľkosť písma prvku vynásobená percentom. Napríklad:

Vyskúšajte toto pero!

V ukážke vyššie sú výšky odsekov troch odsekov nastavené na 150%, 200% a 250%. Element prvku má veľkosť písma definovanú na 20 pixelov. To znamená, že vypočítané výšky riadkov pre odseky sú 30px, 40px a 50px.

Unitless Line Heights

Odporúčaná metóda na definovanie výšky čiary je použitie číselnej hodnoty, ktorá sa označuje ako „výška jednotky“ bez jednotiek. Číselná hodnota môže byť akékoľvek číslo vrátane desatinného čísla, ako sa používa v prvom príklade kódu na tejto stránke.

Výšky riadkov bez jednotky sa odporúčajú kvôli tomu, že podradené prvky zdedia hodnotu surového čísla a nie vypočítanú hodnotu. Vďaka tomu môžu podradené prvky vypočítať výšky svojich riadkov na základe svojej vypočítanej veľkosti písma, namiesto toho, aby zdedili ľubovoľnú hodnotu od rodiča, ktorý bude pravdepodobne potrebovať prekonanie.