W3docs
ru
Войти

Свойство CSS line-height

Свойство CSS line-height задаёт высоту строк текста. Описание свойства, значения и примеры.

Свойство line-height задаёт высоту строкового блока, управляя вертикальным расстоянием между строками текста. Это одно из важнейших свойств для удобочитаемости: слишком плотно расположенные строки трудно читать, а слишком широкий интервал делает абзац разрозненным.

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

Поведение line-height зависит от типа элемента:

  • На блочных элементах свойство line-height задаёт минимальную высоту строкового блока внутри элемента.
  • На незамещаемых строчных элементах оно задаёт высоту, используемую при вычислении высоты строкового блока.
  • На замещаемых строчных элементах, таких как кнопки или другие элементы input, line-height обычно не влияет на вычисление высоты строкового блока.
Информация

Отрицательные значения допустимы.

Информация

Межстрочный интервал по умолчанию составляет от 110% до 120% в большинстве браузеров.

Свойство line-height задаёт интерлиньяж строк текста. Если значение line-height больше значения font-size элемента, разница между ними составит интерлиньяж текста.

Начальное значениеnormal
Применяется кВсем элементам.
НаследуетсяДа.
АнимируетсяДа. Высота строк поддерживает анимацию.
ВерсияCSS1
DOM Синтаксисobject.style.lineHeight = "40px";

Синтаксис

Синтаксис свойства CSS line-height

line-height: normal | number | length | percentage | calc | initial | inherit;

Пример со значением normal:

Пример свойства CSS line-height со значением normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: normal (default)</h3>
    <div>This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Попробуйте сами »

Результат

Абзац, отображаемый с межстрочным интервалом normal по умолчанию в браузере

Пример со значением length:

Пример свойства CSS line-height со значением px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 10px</h3>
    <div>This is a paragraph with a specified line-height.
      <br /> The line height here is set to 10 pixels.
    </div>
  </body>
</html>
Попробуйте сами »

Пример со значением percentage:

Пример свойства CSS line-height со значением %(percentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h2>line-height: 200%</h2>
    <div>This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
  </body>
</html>
Попробуйте сами »

Пример с несколькими значениями:

Пример свойства CSS line-height со значениями cm, px, %(percentage), normal и number

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        line-height: 1;
      }
      div.b {
        line-height: 50px;
      }
      div.c {
        line-height: 0.5cm;
      }
      div.d {
        line-height: 1cm;
      }
      div.e {
        line-height: 200%;
      }
      div.f {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 1</h3>
    <div class="a">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 0.5 centimeter.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1 centimeter.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Попробуйте сами »

Выбор значения: безразмерные числа и единицы измерения

Это наиболее важное решение при задании line-height, и оно сводится к тому, как наследуется значение:

  • Безразмерное число (например, line-height: 1.5) наследуется как множитель. Каждый дочерний элемент умножает этот множитель на собственный font-size, поэтому интервал всегда масштабируется корректно.
  • Длина или процент (например, 1.5em или 150%) вычисляется один раз на элементе, где объявлено, и результирующее значение в пикселях наследуется. Дочерние элементы с другим font-size сохраняют эту фиксированную высоту в пикселях, что может привести к наложению текста.

Сравните оба подхода на родительском элементе, дочерний элемент которого имеет больший шрифт:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Recommended: each element scales the factor by its own font-size */
      .good { line-height: 1.5; }
      /* Problematic: computed pixel height is inherited as-is */
      .bad  { line-height: 150%; }
      .child { font-size: 3em; }
    </style>
  </head>
  <body>
    <div class="good">
      Parent text. <span class="child">Big inherited line scales fine.</span>
    </div>
    <div class="bad">
      Parent text. <span class="child">Big inherited line may overlap.</span>
    </div>
  </body>
</html>

Практическое правило: используйте безразмерное число для текста основного содержимого. Фиксированная длина (px/em) уместна только тогда, когда намеренно нужен постоянный строковый блок — например, для вертикального центрирования одной строки текста путём совмещения line-height с высотой элемента.

Доступность

Критерий успеха WCAG 1.4.12 по межстрочному интервалу требует, чтобы содержимое оставалось читаемым при увеличении пользователем интерлиньяжа до 1.5-кратного размера шрифта и более. Безразмерное значение line-height равное 1.5 или больше для текста основного содержимого является безопасным доступным значением по умолчанию и позволяет избежать нарушения макета при применении пользователем собственных настроек межстрочного интервала.

Значения

ЗначениеОписаниеПопробуйте
normalЗадаёт стандартную высоту строки. Это значение по умолчанию данного свойства.Попробуйте »
lengthЗадаёт фиксированную высоту строки в px, cm, em и т.д.Попробуйте »
numberЗадаёт число, которое умножается на текущий размер шрифта для установки высоты строки.Попробуйте »
%Задаёт высоту строки в процентах от текущего размера шрифта.Попробуйте »
calcЗадаёт высоту строки с помощью вычисления.Попробуйте »
initialУстанавливает для свойства значение по умолчанию.Попробуйте »
inheritНаследует значение свойства от родительского элемента.

Примечание: использование единицы em широко рекомендуется для масштабируемого межстрочного интервала.

Практика

Практика
Что делает свойство 'line-height' в CSS?
Что делает свойство 'line-height' в CSS?
Was this page helpful?