Vlastnost line-height

Vlastnost line-height nastavuje mezery mezi řádky textu (řádkování).

Vlastnost nenastavuje mezeru mezi řádky textu, jak by se mohlo zdát, nastavuje výšku řádku textu. To znamená, že skutečná mezera mezi řádky bude vypočítána takto: line-height - font-size = vzdálenost mezi řádky textu. Nebo naopak line-height = font-size + vzdálenost mezi řádky textu.

Syntaxe

selektor {
	line-height: hodnota;
}

Hodnoty

Hodnotou vlastnosti jsou libovolné jednotky pro velikosti. Při zadání hodnoty v % bude řádkování v procentech od velikosti písma.

Kromě toho lze hodnotou zadat libovolné číslo větší než nula. V tomto případě je chápáno jako násobek velikosti písma. Například, pokud font-size má hodnotu 20px, a line-height - 1.5, pak je to stejné, jako napsat line-height: 30px (20px * 1.5 = 30px).

Ve výchozím nastavení má vlastnost hodnotu normal, v tomto případě prohlížeč volí řádkování automaticky.

Příklad

V tomto příkladu bude vzdálenost mezi řádky textu line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Příklad

Zmenšíme mezeru na 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Příklad

V tomto příkladu bude vzdálenost mezi řádky textu line-height - font-size = 18px - 18px = 0px - řádky se prakticky spojí (ocásky písmen horního řádku se budou dotýkat ocásků písmen dolního řádku):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Příklad

V tomto příkladu je hodnota line-height - násobek 1.5 od velikosti písma. Proto line-height bude ekvivalentní font-size * 1.5 = 18px * 1.5 = 27px. A skutečná mezera mezi řádky bude line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Příklad

Zvětšíme násobek:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Příklad

Pokud uděláme line-height menší než font-size, řádky se budou navzájem překrývat:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}