Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?
<div>
Lorem ipsum dolor sit amet,
<span>
consectetur adipiscing elit. ...
</span>
</div>
div {
font-size:32px;
line-height:1.4EM;
}
span {
font-size:12px;
line-height:1EM;
}
Vy ale samozřejmě očekáváte tenhle vzhled:
Problém je v tom, že ve specifikaci HTML5 je, že inline prvky nemohou mít vlastní line-height a musí ji vždy zdědit od nadřazeného blokového prvky. Oprava je tedy jednoduchá – stačí příslušný prvek změnit na blokový nebo ho blokem obalit:
div {
font-size:32px;
line-height:1.4EM;
}
span {
font-size:12px;
line-height:1EM;
/* umožní použít line-height: */
display: block;
}
Navíc line-height zadaná s jednotkami je vždy odvozena od font-size prvku, u kterého je definována. Pokud tedy v kontejneru nastavíte line-height (ať už jako EM nebo procenta), všichni potomci budou mít stejnou line-height nezávisle na vlastní velikosti písma (tedy za předpokladu, že nemají vlastní line-height nebo jsou to inline prvky).
/* line-height vždy 24px */
.container1 {
font-size: 20px; line-height: 1.2EM;
}
.container2 {
font-size: 20px; line-height: 120%;
}
.container1 div {
font-size: 12px;
}
.container2 span {
font-size: 10px; line-height: 1.2EM;
}
Pokud naopak chcete, aby byla line-height pro každý prvek vypočtena podle jeho font-size, je potřeba zadat line-height jako poměr:
.container {
font-size: 20px;
line-height: 1.2;
/* line-height: 24px */
}
.container div.x {
font-size: 12px;
/* line-height: 14.4px */
}
.container div.y {
font-size: 10px;
/* line-height: 12px */
}
Samozřejmě ještě existuje speciální hodnota normal, která odpovídá přibližně poměru 1.38, což je doporučená výška řádku pro bezproblémové zobrazení všech znaků (např. české háčky a čárky). Pokud použijete menší výšku, může se stát tohle:
ŘŘŘŘŘŘŘŘŘŘŘŘŘŘŘ
Správně čitelný text samozřejmě vypadá takto:
ŘŘŘŘŘŘŘŘŘŘŘŘŘŘŘ