Уласцівасць 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>
	які-небудзь тэкст...
</p>

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

Прыклад

Паменшым прамежак да 25px - 18px = 7px:

<p>
	які-небудзь тэкст...
</p>

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

Прыклад

У гэтым прыкладзе адлегласць паміж радкамі тэксту будзе line-height - font-size = 18px - 18px = 0px - радкі практычна зліпнуцца (хвасцікі літар верхняга радка будуць датыкацца хвасцікаў літар ніжняга):

<p>
	які-небудзь тэкст...
</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>
	які-небудзь тэкст...
</p>

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

Прыклад

Павялічым множнік:

<p>
	які-небудзь тэкст...
</p>

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

Прыклад

Калі зрабіць line-height менш за font-size, то радкі ўвогуле налезуць адна на адну:

<p>
	які-небудзь тэкст...
</p>

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