Line height css что это

Свойства font-size и line-height

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

font-size и line-height

• font-size – размер шрифта, в частности, определяющий высоту букв.
• line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

 body 
Ёрш р
 
Ёрш Ё

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal .

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Множитель для line-height

Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .

Однако, между множителем и точным значением есть одна существенная разница.

• Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
• Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

 
стандартная строка 
шрифт в 2 раза больше 
шрифт в 2 раза больше
 

Свойство line-height

Свойство line-height устанавливает интервал между строками текста (межстрочный интервал).

Свойство не задает промежуток между строками текста, как могло бы показаться, оно задает высоту линии текста. Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

Синтаксис

Значения

Значением свойства служат любые единицы для размеров. При указании значения в % межстрочный интервал будет в процентах от размера шрифта.

Кроме того, можно задать значением любое число больше нуля. В этом случае оно воспринимается как множитель от размера шрифта. Например, если font-size имеет значение 20px , а line-height — 1.5 , то это все равно, что написать line-height: 30px (20px * 1.5 = 30px).

По умолчанию свойство имеет значение normal , в этом случае браузер выбирает межстрочный интервал автоматически.

Пример

В данном примере расстояние между строками текста будет line-height — font-size = 38px — 18px = 20px:

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

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

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

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

body < font-size: 16px; line-height: 1.5; >blockquote

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

line-height¶

Свойство line-height для блочных элементов определяет минимальную высоту строки текста.

Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

Демо¶

Шрифт и Цвет

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: unset; 

Значения¶

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

Расстояние между строк вычисляется автоматически.

line-height: normal; 

Применяется ко всем элементам