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>

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

-moz-block-height

Робить висоту рядка рівною висоті вмісту поточного блока.

Занепокоєння щодо доступності

Для вмісту головного абзацу слід задавати 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>. Перший, з зеленими межами, використовуватиме значення line-height без одиниць. Другий, з червоними межами, використовуватиме значення 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;
}

Результат

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

              <br />
              <small>
                  # line-height-property
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>