Line-height

Пример: р {line-height: 1.5;}, допустимые значения - любое числовое значение.

Свойство line-height отвечает за междустрочный пробел, то есть за расстояние между строками текста. Оно задается в качестве расстояния между основанием одной строки и основанием следующей строки. Это расстояние должно быть больше высоты шрифта. По умолчанию браузер задает междустрочное расстояние пропорционально размеру шрифта, обычно оно составляет 118% от размера шрифта (по моим подсчетам).

Самым простым способом задания междустрочного расстояния является использование свойства font: для указания размера шрифта и высоты строки:

div#intro {font: 1.2em/1.4;}

В данном случае междустрочное расстояние в 1,4 раза превышает размер шрифта, равный 1,2 em. Обратите внимание, что для значения этого свойства не требуется указывать единицы измерения, так как в данном случае CSS просто подсчитывает число экранных пикселов - 1,2 em - и умножает их на 1,4. Если затем мы увеличим размер шрифта до 1,5 em, междустрочное расстояние все равно останется равным 1,4 по отношению к 1,5 em. Если указать высоту строки в фиксированных единицах, например в пиксела, при увеличении размера шрифта текст строк будет наползать друг на друга.

Следует отметить, что высота строки распределяется над и под текстом. Давайте рассмотрим простой пример, иллюстрирующий этот принцип действия. Предположим, что высота шрифта равна 12 пикселам, а высота строки - 20 пикселам. В таком случае браузер добавляет 4 пиксела пустого пространства над текстом строки и 4 пиксела под текстом строки - 4 + 12 + 4 = 20. Когда же мы смотрим на текст, то не замечаем этого, так как нам кажется, что в целом между строками имеется 8 пикселов свободного пространства.