Исполняемые доки CSS: Line-height

Q: Нужны ли line-height единицы измерения?

Обычно нет. Значение без единиц, например 1.5, умножается на собственный размер шрифта каждого элемента, поэтому остается пропорциональным у дочерних элементов с другим размером. Значение с единицей вычисляется один раз и наследуется как фиксированная длина.

Что делает line-height

line-height задает высоту каждой строки текста. Разница между этой высотой и высотой, которая нужна самому шрифту, делится пополам и добавляется над и под буквами, поэтому именно так управляют расстоянием между строками.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Во всех трех абзацах шрифт 16px. Строки высотой 16px, 24px и 32px.

Значения: без единиц, длина, проценты, normal

Значение	Пример	Высота строки для текста 16px	Дочерние элементы наследуют как
Число	`1.5`	24px	Само число (1.5), пересчитывается для каждого элемента
Длина	`24px`, `1.5em`, `1.5rem`	24px	Вычисленную длину (24px)
Проценты	`150%`	24px	Вычисленную длину (24px)
`normal`	`normal`	Из шрифта, часто около 1.2	`normal`

На одном элементе первая и вторая строки выглядят одинаково. Разница видна только у дочернего элемента с другим размером шрифта, об этом следующий раздел.

Почему значение без единиц лучший выбор

Межстрочный интервал 1.5em или 150% превращается в пиксели на родителе, и дочерние элементы наследуют эти пиксели. Дочерний элемент с более крупным шрифтом тогда получает строки ниже своих букв. 1.5 без единиц наследуется как само число и умножается на собственный размер шрифта каждого дочернего элемента.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Оба заголовка переносятся на две строки. Первый наследует строки по 21px для букв 32px, поэтому его строки наезжают друг на друга. Второй получает строки 32 × 1.5 = 48px. Задайте line-height один раз на body числом, и большинству страниц больше не понадобится его трогать.

Попробуйте значения сами

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте 1, 2, 30px, 200% и normal. Chrome показывает normal самим словом, а не в пикселях, потому что его размер берется из шрифта.

Хорошие значения для удобного чтения

Основной текст: от 1.4 до 1.6. Длинным строкам нужен больший интервал, чтобы глаз находил начало следующей строки.
Заголовки: от 1.1 до 1.3. Крупный текст с интервалом 1.5 выглядит как отдельные строки, а не один заголовок.
Кнопки и однострочные подписи: от 1 до 1.25, а высоту дает padding.

Для доступности критерий успеха WCAG 1.4.12 требует, чтобы страница продолжала работать, когда читатель задает межстрочный интервал в 1.5 размера шрифта, поэтому избегайте фиксированной высоты у текстовых блоков, которая обрежет текст.

Вертикальное центрирование одной строки текста

Когда в блоке ровно одна строка, line-height, равный высоте блока, ставит текст посередине по вертикали, потому что дополнительное пространство делится поровну сверху и снизу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Это ломается, как только текст переносится на две строки, потому что каждая строка тогда высотой 40px. Все, что может переноситься, центрируйте через flexbox, как показано на странице выравнивание div по центру.

Сокращенное свойство font

Сокращенное свойство font задает размер и межстрочный интервал вместе через косую черту:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Сокращенная запись сбрасывает все свойства шрифта, которые в ней не упомянуты (в том числе line-height до normal, если опустить часть после черты), поэтому пишите ее до отдельных правил font-*.

Частые ошибки

em или % на контейнере. Дочерние элементы наследуют фиксированную длину. Используйте число без единиц.
Фиксированная height у текстового блока. Когда текст переносится или читатель увеличивает интервалы, он переполняется. Пусть высоту задает содержимое.
Слишком плотный основной текст. line-height: 1 делает абзацы трудночитаемыми. Начните с 1.5.
Ожидание, что line-height добавит расстояние между абзацами. Это margin у абзацев.
Расчет на normal. Он меняется от шрифта к шрифту, поэтому раскладка сдвигается при смене шрифта.

Часто задаваемые вопросы

Что делает line-height в CSS?

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

Нужны ли line-height единицы измерения?

Обычно нет. Значение без единиц, например 1.5, умножается на собственный размер шрифта каждого элемента, поэтому остается пропорциональным у дочерних элементов с другим размером. Значение с единицей вычисляется один раз и наследуется как фиксированная длина.

Какой межстрочный интервал хорош для основного текста?

От 1.4 до 1.6 для абзацев и примерно от 1.1 до 1.3 для крупных заголовков. Рекомендация WCAG уровня AAA требует для абзацев не меньше 1.5.

Что такое line-height: normal?

Значение по умолчанию. Браузер берет его из метрик самого шрифта, обычно около 1.2, но у каждого шрифта свое, поэтому для разных шрифтов оно непредсказуемо.

Как изменить межстрочный интервал в HTML?

В HTML нет атрибута для межстрочного интервала. Используйте свойство CSS, например <p style="line-height: 2;"> для двойного интервала.

Связанные концепции

Межстрочный интервал в CSS: line-height без единиц, px, em