Vlastnosť line-height

Vlastnosť line-height nastavuje interval medzi riadkami textu (medziriadkový interval).

Vlastnosť nenastavuje medzery medzi riadkami textu, ako by sa mohlo zdať, ale nastavuje výšku riadku textu. To znamená, že skutočná medzera medzi riadkami bude vypočítaná takto: line-height - font-size = vzdialenosť medzi riadkami textu. Alebo naopak line-height = font-size + vzdialenosť medzi riadkami textu.

Syntax

selektor {
	line-height: hodnota;
}

Hodnoty

Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti. Pri uvedení hodnoty v % bude medziriadkový interval v percentách od veľkosti písma.

Okrem toho je možné zadať hodnotou akékoľvek číslo väčšie ako nula. V tomto prípade sa chápe ako násobiteľ veľkosti písma. Napríklad, ak font-size má hodnotu 20px, a line-height - 1.5, tak to je to isté, ako napísať line-height: 30px (20px * 1.5 = 30px).

Predvolene má vlastnosť hodnotu normal, v tomto prípade prehliadač vyberá medziriadkový interval automaticky.

Príklad

V tomto príklade bude vzdialenosť medzi riadkami textu line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Príklad

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

<p>
	some long text
</p>

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

Príklad

V tomto príklade bude vzdialenosť medzi riadkami textu line-height - font-size = 18px - 18px = 0px - riadky sa prakticky zlepia (chvostíky písmen horného riadku sa budú dotýkať chvostíkov písmen dolného riadku):

<p>
	some long text
</p>

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

Príklad

V tomto príklade je hodnota line-height - násobiteľ 1.5 od veľkosti písma. Preto line-height bude ekvivalentná font-size * 1.5 = 18px * 1.5 = 27px. A skutočná medzera medzi riadkami bude line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Príklad

Zväčšíme násobiteľ:

<p>
	some long text
</p>

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

Príklad

Ak sa urobí line-height menšia ako font-size, tak sa riadky dokonca prekryjú:

<p>
	some long text
</p>

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