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