line-height

/* 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;

Свойство line-height задаётся любым из следующих способов:

• числовое <number>
• числовое <length>
• числовое <percentage>
• ключевое слово normal.

normal

Зависит от пользователя. Браузеры для настольных ПК (включая Firefox) используют значение по умолчанию, примерно равное 1.2, в зависимости от font-family элемента.

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

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

<length>

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

<percentage>

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

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

W3C Понимание WCAG 2.1

line-height = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <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 Georgia,
    "Bitstream Charter",
    serif;
}

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

Этот пример показывает, почему лучше использовать <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 может использоваться для корректировки расстояния между вертикальными строками в вертикальных режимах написания.

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

  writing-mode: vertical-rl;
}

.wide {
  line-height: 2;
}

Результат

• font, font-size