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

Свойство line-height CSS задаёт высоту линейного блока в горизонтальных режимах письма. В вертикальных режимах письма оно задаёт ширину линейного блока. Его часто используют, чтобы задать расстояние между строками текста. Для блочных элементов в горизонтальных режимах письма оно задаёт предпочтительную высоту линейных блоков внутри элемента, а для встроенных элементов, не являющихся замещаемыми, — высоту, которая используется для расчёта высоты линейного блока.

Попробуйте

line-height: normal;

line-height: 2.5;

line-height: 3em;

line-height: 150%;

line-height: 32px;

<section id="default-example">
  <div class="transition-all" id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun.
  </div>
</section>

#example-element {
  font-family: "Georgia", serif;
  max-width: 200px;
}

Синтаксис

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

Значения

Это свойство задаётся одним значением из следующего списка:

normal

Зависит от пользовательского агента. В настольных браузерах (включая Firefox) значение по умолчанию составляет примерно 1.2 и зависит от font-family элемента.

<number> (без единиц измерения)

Используемое значение — это число <number> без единиц измерения, умноженное на размер шрифта самого элемента. Вычисленное значение совпадает с указанным <number>. В большинстве случаев предпочтительно использовать именно этот способ задания line-height, чтобы избежать неожиданных результатов при наследовании.

<length>

Указанное <length> используется при расчёте высоты линейного блока. Значения в единицах em могут привести к неожиданным результатам (см. пример ниже).

<percentage>

Относительно размера шрифта самого элемента. Вычисленное значение — это <percentage>, умноженное на вычисленный размер шрифта элемента. Значения в процентах могут привести к неожиданным результатам (см. второй пример ниже).

Доступность

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

Понимание WCAG 2.2 от W3C

Формальное определение

Формальный синтаксис

line-height = 
  normal |
  <number> |
  <length> |
  <percentage>

Примеры

Базовый пример

/* All rules below have the same resultant line height */

/* number/unitless */
div {
  line-height: 1.2;
  font-size: 10pt;
}

/* length */
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/* percentage */
div {
  line-height: 120%;
  font-size: 10pt;
}

/* font shorthand */
div {
  font:
    10pt/1.2 "Bitstream Charter",
    "Georgia",
    serif;
}

Часто удобнее задавать line-height с помощью сокращённого свойства font, как показано выше, однако для этого необходимо также указать свойство font-family.

Для значений line-height предпочтительны числа без единиц измерения

В этом примере показано, почему лучше использовать значения <number>, а не значения <length>. Используем два элемента <div>. Для первого div с зелёной рамкой задано значение line-height без единиц измерения. Для второго div с красной рамкой задано значение line-height в emах.

HTML

<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior.
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px, probably not what you want -->

CSS

.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

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

Результат

Расстояние между строками в вертикальных режимах письма

Свойство line-height можно использовать для настройки расстояния между вертикальными строками в вертикальных режимах письма.

<div class="haiku">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>

<div class="haiku wide">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>

.haiku {
  border: 1px solid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: wheat;

  writing-mode: vertical-rl;
}

.wide {
  line-height: 2;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• font, font-size
• Интерлиньяж