line-height в CSS

Свойство line-height, когда применяется к блочному элементу, определяет высоту каждой строки. Не следует путать с межстрочным расстоянием в большинстве графических программ (вроде Photoshop), которое определяет пространство между строками в абзаце. Несмотря на то, что они оба выполняют одну и ту же задачу (интервал между строк текста), делают они это по-разному.

Свойство line-height использует следующие единицы:

• px
• em
• %
• безразмерные числа, вроде 1.5

Эти безразмерные значения в основном действуют как проценты. Таким образом, 150% равно 1.5. Последнее является просто более компактным и читаемым.

Почему важно line-height

Целью line-height является определение комфортного расстояния между строк для вашего текста. Поскольку удобочитаемость зависит от размера текста, рекомендуется использовать динамическое значение связанное с размером текста. Использование px поэтому и не рекомендуется, так как пиксели определяют статическое значение.

В некоторых случаях использование пикселей действительно пригодится (если вы желаете выровнять текст по вертикали в соответствии с другим элементом, а не в зависимости от размера шрифта).

Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:

• для основного текста line-height рекомендуется как 1.5 от размера текста;
• для заголовков line-height рекомендуется значение 1.2.

body { font-size: 16px; line-height: 1.5; }

Вычисленная высота строки будет, таким образом, 16 * 1.5 = 24px.

Наследование line-height

Поскольку свойство line-height наследуется дочерними элементами, оно будет оставаться постоянным, независимо от того, какой font-size впоследствии применяется.

body { font-size: 16px; line-height: 1.5; }
blockquote { font-size: 18px; }

Элемент <blockquote> будет иметь высоту строки 27px.

Перейти к заданиям