Својството 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;
}