Уласцівасць 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;
}