Својство line-height

Својство line-height поставља интервал између редова текста (међуредни интервал).

Својство не задаје размак између редова текста, као што се могло учинити, оно задаје висину линије текста. То значи да ће се стварни размак између редова израчунати овако: line-height - font-size = удаљеност између редова текста. Или обрнуто line-height = font-size + удаљеност између редова текста.

Синтакса

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

Вредности

Вредностима својства служе било које јединице за димензије. При навођењу вредности у % међуредни интервал ће бити у процентима од величине фонтa.

Поред тога, може се задати вредношћу било који број већи од нуле. У том случају се тумачи као множилац величине фонтa. На пример, ако 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 од величине фонтa. Стога ће 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;
}