Výška řádku - Triky CSS | Almanach CSS 2025

line-heightVlastnost definuje množství prostoru nad a pod inline prvků. To znamená, že prvky, které jsou nastaveny na display: inlinenebo display: inline-block. Tato vlastnost se nejčastěji používá k nastavení začátku řádků textu.

p ( line-height: 1.5; )

line-heightVlastnost může přijmout klíčových hodnot normalnebo nonestejně jako počet, délku nebo procento.

Podle specifikace není hodnota „normální“ pouze jedna konkrétní hodnota, která se aplikuje na všechny prvky, ale spíše se počítá na „rozumnou“ hodnotu v závislosti na velikosti písma (nebo zděděné) na prvku.

Hodnotu délky lze definovat pomocí jakékoli platné jednotky CSS (px, em, rem atd.).

Procentní hodnota je velikost písma prvku vynásobená procentem. Například:

Podívejte se na toto pero!

V ukázce výše mají tři odstavce výšku řádků nastavenou na 150%, 200% a 250%. Prvek těla má velikost písma definovanou na 20px. To znamená, že vypočítané výšky řádků pro odstavce jsou 30px, 40px a 50px.

Unitless Line Heights

Doporučenou metodou pro definování výšky čáry je použití číselné hodnoty, která se nazývá „bezjednotková“ výška čáry. Číslovou hodnotou může být jakékoli číslo, včetně desetinného čísla, jak se používá v prvním příkladu kódu na této stránce.

Výšky řádků bez jednotky se doporučují vzhledem k tomu, že podřízené prvky zdědí hodnotu surového čísla, nikoli vypočítanou hodnotu. Díky tomu mohou podřízené prvky vypočítat výšky řádků na základě jejich vypočítané velikosti písma, místo aby zdědily libovolnou hodnotu od rodiče, u kterého je pravděpodobnější, že bude potřebovat přepsání.