Свойство line-height

Свойството line-height задава интервала между редовете текст (междуредов интервал).

Свойството не задава разстояние между редовете текст, както може да изглежда, то задава височината на линията на текста. Това означава, че реалното разстояние между редовете ще бъде изчислено така: line-height - font-size = разстояние между редовете текст. Или обратно line-height = font-size + разстояние между редовете текст.

Синтаксис

селектор {
	line-height: стойност;
}

Стойности

Стойност на свойството са всякакви мерни единици за размери. При задаване на стойност в % междуредовият интервал ще бъде в проценти от размера на шрифта.

Освен това, може да се зададе като стойност всяко число по-голямо от нула. В този случай то се възприема като множител от размера на шрифта. Например, ако font-size има стойност 20px, а line-height - 1.5, то това е все едно да напишем line-height: 30px (20px * 1.5 = 30px).

По подразбиране свойството има стойност normal, в този случай браузърът избира междуредов интервал автоматично.

Пример

В този пример разстоянието между редовете текст ще бъде line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Пример

Намаляваме разстоянието до 25px - 18px = 7px:

<p>
	some long text
</p>

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

Пример

В този пример разстоянието между редовете текст ще бъде line-height - font-size = 18px - 18px = 0px - редовете практически ще се слепят (опашките на буквите от горния ред ще докосват опашките на буквите от долния):

<p>
	some long text
</p>

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

Пример

В този пример стойността line-height - множител 1.5 от размера на шрифта. Следователно line-height ще бъде еквивалентен на font-size * 1.5 = 18px * 1.5 = 27px. А реалното разстояние между редовете ще бъде line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Пример

Увеличаваме множителя:

<p>
	some long text
</p>

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

Пример

Ако се направи line-height по-малък от font-size, то редовете ще се належат един върху друг:

<p>
	some long text
</p>

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