CSS line-height. Межстрочный интервал CSS в html. Примеры

Свойство CSS line-height отвечает за расстояние между строками. Иногда это свойство называют интерлиньяжем.

Синтаксис CSS line-height

...
line-height: value;
...

Где value может принимать

normal - константа, которая означает стандартное межстрочное расстояние
Простые вещественные значения (1.0, 0.4, 1.3 - это коэффициент множителя относительно стандартного расстояния между строками)
Значение в пикселях (1px, 20px)
Значение в пунктах pt (1.0pt, 1.2pt)
Значение в единицах em (0.5em, 0.2em)
Значение в процентах

Примечание

В зависимости от шрифта и его размера межстрочный интервал разный. В Microsoft установили стандарт: line-height:1.2em

Межстрочный интервал CSS на сайте html

Пример. Различные варианты задания межстрочного интервала

<html>
<head>
<style>
	.primer1{
	line-height: 1.0;
	}
	.primer2{
	line-height: 0.5;
	}
	.primer3{
	line-height: 2.0;
	}
	.primer4{
	line-height: 12px;
	}
</style>
</head>
<body>
	<p class="primer1">Пример 1. Какой-то текст line-height:1.0
	<br/>Какой-то текст</p> 
	<p class="primer2">Пример 2. Какой-то текст line-height:0.5
	<br/>Какой-то текст</p> 
	<p class="primer3">Пример 3. Какой-то текст line-height:2.0
	<br/>Какой-то текст</p> 
	<p class="primer4">Пример 4. Какой-то текст line-height:12px
	<br/>Какой-то текст</p> 
</body>
</html>

На странице преобразуется в следующее

Пример 1. Какой-то текст. line-height:1.0
Какой-то текст

Пример 2. Какой-то текст. line-height:0.5
Какой-то текст

Пример 3. Какой-то текст. line-height:2.0
Какой-то текст

Пример 4. Какой-то текст. line-height:12px
Какой-то текст

Какое межстрочный интервал лучше выбрать

Лучшие выбирать относительные интервалы от 1.5 до 2.5 (или в процентах 150%..250%). При таком интервале текст лучше читается, а интервал привязан к размеру шрифта.

Для обращения к line-height из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.lineHeight="VALUE"

← Перейти в каталог CSS уроков