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

Свойство line-height устанавливает межстрочный интервал. Возможны три ситуации:

  • В элементах блочного уровня свойство line-height указывает минимальную высоту блоков строк внутри элемента.
  • В незаменяемых строчных элементах свойство указывает высоту, которая используется для вычисления высоты блоков строк.
  • В заменяемых строчных элементах свойство line-height не имеет никакого эффекта.
Отрицательные значения допустимы.
Для большинства браузеров line-height по умолчанию может быть от 110% до 120%.

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

Свойство line-height не имеет эффекта, если применяется к строчным элементам, например, кнопкам(buttons), изображениям(img) и т. д.
Значение по умолчанию normal
Применяется К элементам списка.
Наследуется Да
Анимируемое Да. Высота строк анимируема.
Версия CSS1
DOM синтаксис object.style.lineHeight = "40px";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства line-height</h2>
    <h3>line-height: normal (default)</h3>
    <div>Параграф со стандартной высотой строки.<br>
      Стандартная высота строки в большинстве браузеров может быть от 110% до 120%.
    </div>
  </body>
</html>

Пример, где высота строки установлена в "px":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства line-height</h2>
    <h3>line-height: 10px</h3>
    <div>Параграф с указанной высотой строки. <br>
      Высота строки равна 10 px.
    </div>
  </body>

Пример, где высота строки указана в процентах:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства line-height</h2>
    <h2>line-height: 200%</h2>
    <div>Параграф с большей высотой строки.<br>
      Высота строки равна 200%.
    </div>
  </body>
</html>

Пример со всеми значениями свойства:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.a {
      line-height: 10px;
      }
      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</h2>
    <h3>line-height: 10px</h3>
    <div class="a">Параграф с указанной высотой строки.<br>
      Высота строки равна 10 px.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">Параграф с указанной высотой строки.<br>
      Высота строки равна 50 px.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">Параграф с указанной высотой строки.<br>
      Высота строки равна 0.5 cm.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">Параграф с указанной высотой строки..<br>
      Высота строки равна 1 cm.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">Параграф с большей высотой строки.<br>
      Высота строки равна 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">Параграф со стандартной высотой строки.<br>
      Стандартная высота строки в большинстве браузеров может быть от 110% до 120%.
    </div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Какие из приведенных ниже вариантов являются возможными значениями для CSS свойства 'line-height'?
Считаете ли это полезным?