skip to main content

line-height

css

Кратко 🔗

line-height задаёт интервал между строчками текста, который называют интерлиньяж.

Примеры 🔗

/* Стандартный интервал */
line-height: normal;

/* Множитель: расстояние будет в 3.5 раза больше, чем размер текста */
line-height: 3.5;

/* Условные единицы: значение, относительно стандартного интервала.
В данном случае, интервал будет в 3 раза больше интервала родительского элемента. */

line-height: 3em;

/* Проценты: размер интервала высчитывается относительно размера шрифта */
line-height: 34%;

/* Общие значения: наследовать у родителя, оставить исходное или произвольное */
line-height: inherit;
line-height: initial;
line-height: unset;

Как это понять 🔗

С помощью line-height можно выбрать, насколько большое расстояние будет между строчками текста. Обычно это расстояние немного больше, чем высота шрифта.

Как пишется 🔗

Задать свойство line-height можно одним из нескольких значений. Самый предсказуемый вариант — с помощью числа. Помни, что у свойства line-height не может быть отрицательного значения.

  • normal — значение по умолчанию. Немного отличается в разных браузерах, но, как правило, равно 1.2. Это значит, что расстояние между строчками будет равно размеру шрифта font-family, помноженному на 1.2.
  • inherit — наследует межстрочное расстояние у родительского элемента.
  • число — например, 1.5. Это значит, что размер между строчками будет равен размеру шрифта font-family, помноженному на 1.5. Лучше задавать интерлиньяж именно таким способом, чтобы, при увеличении размера шрифта, увеличивалось и расстояние между строчками.
  • длина — например, пиксели px, условные единицы шрифта em, дюймы in, пункты pt и так далее. Не самый лучший вариант, потому что он не подстраивается автоматически под размер шрифта и может выглядеть не так, как ты ожидаешь.
  • проценты — например, line-height: 120%. За 100% берётся размера шрифта font-size.

Подсказки 🔗

💡 Самый надёжный способ задать интервал между строчками — с помощью числа, например, 1.5. При увеличении масштаба страницы этот интервал увеличится соответствующим образом.

💡 Для обычного текста чаще всего используют полуторный интервал line-height: 1.5. С таким интервалом текст удобнее читать.

💡 Ещё один способ задать интервал между строк — свойство font. При этом обязательно сразу указать семейство шрифтов font-family. Например:

div {
font: 10px/1.2 Georgia, "Bitstream Charter", serif;
}

Ещё примеры 🔗

Попробуем задать одно и то же расстояние между строчками с помощью разных значений. Каждое значение будет умножаться на размер шрифта font-size:

div {
line-height: 1.2;
font-size: 10px;
} /* число */
div {
line-height: 1.2em;
font-size: 10px;
} /* длина */
div {
line-height: 120%;
font-size: 10px;
} /* процент */

Другой пример показывает, почему лучше всего задавать расстояние между строчками с помощью числа.

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

HTML

<div class="box box_green">
<h1>Тут мы задали интервал с помощью числа 1.2</h1>
Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.
</div>

<div class="box box_blue">
<h1>А здесь мы ввели 1.2em</h1>
Это значит, что 1.2 умножается на размер шрифта родительского элемента, в
нашем случае
<div>, а не на размер заголовка. Это вносит путаницу.</div>
</div>

CSS

h1 {
font-size: 30px;
}

.box {
width: 18em;
padding: 20px;
display: inline-block;
vertical-align: top;
font-size: 15px;
}

.box_green {
line-height: 1.2;
background-color: #49a16c;
}

.box_blue {
line-height: 1.2em;
background-color: #1a5ad7;
}

В работе 🔗

Алёна,

🛠 Если при вёрстке макета ты видишь межстрочное расстояние, заданное в пикселях, то не стоит переносить его в точности. В случае, если размер шрифта элемента изменится, то абсолютно заданное межстрочное расстояние не подстроится. А хотелось бы больше гибкости.

Используй следующую функцию для расчёта относительного интерлиньяжа:

line height / font size = относительный line-height

Если размер шрифта в ФШ равен 58px, а межстрочное расстояние — 86px, то результат будет таким:

86 / 58 = 1.482758621

При округлении получим значение 1.5.

🛠 Если в ФШ интерлиньяж не указан (пустое поле), то он равен стандартному значению — 120%. Что аналогично 1.2 для вёрстки.

Владимир 👨‍🔧

🛠 Часто новички сталкиваются с такой темой: например, надо зашить ссылку в картинку, типа логотип в шапке сайта, который при нажатии ведет на главную. По умолчанию под картинкой появляется небольшой отступ, похожий на padding-bottom, хотя на самом деле отступы равны нулю. Если поставить к картинке и тегу <a> {line-height: 0;}, то всё встанет на свои места, и картинка будет без отступов снизу.

🛠 Когда ты юзаешь иконки в виде текста (а-ля Fontello), часто бывает, что нужно какой-то квадратный блок сделать с иконкой внутри. Ты делаешь по стандарту, и у тебя квадрат не получается, а в разных браузерах он вообще разной высоты.

Тогда нужно тоже делать с line-height. Например, нам нужен квадратик 25х25:

HTML

<i class="icon-smth square"></i>

CSS

.square {
font-size: 16px;
display: inline-block; /* обычно используется, чтобы делать
вертикальное выравнивание и чтобы элемент слушался
корректно высоту (display: inline, который стоит по умолчанию, не дружит с этим)*/

line-height: 25px; /* задаем высоту строки */
height: 25px; /* высоту самого блока, чтоб была равна высоте строки */
width: 25px;
border: 1px solid #aaa; /* граница, чтоб было видно, что это квадрат */
}

Если вырезать height: 25px; в этом куске стиля, будет так себе. Иконка уплывет и встанет не по центру вертикали.


Автор: Макс 👨‍🔧