line-height

Властивість CSS line-height (висота лінії) задає висоту рамки-лінії за горизонтального напрямку письма. За вертикального письма вона задає ширину рамки лінії. Цю властивість заведено вживати для задання відстані між рядками тексту. Для елементів блокового рівня за горизонтального письма вона задає бажану висоту рамок ліній в межах елемента, а для незаміщених рядних елементів – задає висоту, що вживається для обчислення висоти рамки лінії.

Спробуйте його в дії

Синтаксис

/* Значення – ключове слово */
line-height: normal;

/* Значення без одиниці вимірювання – вони множаться
на розмір шрифту елемента */
line-height: 3.5;

/* Значення <length> */
line-height: 3em;

/* Значення <percentage> */
line-height: 34%;

/* Глобальні значення */
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>. У більшості випадків цей варіант є рекомендованим для задання line-height й уникнення неочікуваних результатів, пов'язаних з успадкуванням.

<length>

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

<percentage>

Відсотки від розміру шрифту самого елемента. Обчислене значення – ці відсотки, помножені на обчислений розмір шрифту елемента. Відсоткові значення можуть призвести до неочікуваних результатів (дивіться другий приклад нижче).

Доступність

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

W3C розуміння WCAG 2.1 (англ.)

Формальне визначення

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

normal | <number> | <length> | <percentage>

Приклади

Базовий приклад

/* Усі правила нижче дають однакову результівну висоту рядка */

/* число/без одиниць */
div {
  line-height: 1.2;
  font-size: 10pt;
}

/* довжина */
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/* відсотки */
div {
  line-height: 120%;
  font-size: 10pt;
}

/* скорочення font */
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
}

Нерідко може бути зручнішим задати line-height шляхом використання скорочення font, як показано вище, але це вимагає, аби також була задана властивість font-family.

Рекомендація чисел без одиниць як значень line-height

Цей приклад показує, чому краще використовувати значення <number>, а не <length>. Буде два елементи <div>. Перший div, з зеленими межами, використовуватиме значення line-height без одиниць. Другий div, з червоними межами, використовуватиме значення line-height, визначене в em.

HTML

<div class="box green">
  <h1>
    Уникайте неочікуваних результатів, використовуючи line-height без одиниць
    вимірювання.
  </h1>
  line-height з довжиною та відсотками мають кепську взаємодію з успадкуванням.
</div>

<div class="box red">
  <h1>
    Уникайте неочікуваних результатів, використовуючи line-height без одиниць
    вимірювання.
  </h1>
  line-height з довжиною та відсотками мають кепську взаємодію з успадкуванням.
</div>

<!-- line-height першого <h1> обчислюється на основі його власного  font-size   (30px × 1.1) = 33px -->
<!-- line-height другого <h1> випливає з font-size червоного div  (15px × 1.1) = 16.5px, мабуть, не те, що ви б хотіли -->

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