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