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	Значение элемента наследуется от родительского элемента.