line-height

CSS-властивість line-height (укр. — “висота рядка”) визначає відстань між базовими лініями текстових рядків у елементі. Це одна з найбільш важливих властивостей для налаштування читабельності тексту, оскільки правильне значення line-height може значно покращити сприйняття тексту, зокрема у великих блоках тексту або при роботі з різними розмірами шрифтів.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

line-height: normal | <number> | <length> | <percentage>;

Значення

  • normal — значення за замовчуванням. Встановлює висоту рядка на рівні, що відповідає нормі для шрифта, зазвичай від 1.2 до 1.5.
  • <number> — множник для визначення висоти рядка. Наприклад, line-height: 1.5; означає, що висота рядка буде в 1.5 рази більша за розмір шрифта.
  • <length> — конкретне значення висоти рядка в пікселях або інших одиницях виміру, таких як em, rem, px тощо. Наприклад, line-height: 36px; встановлює висоту рядка рівною 36 пікселям.
  • <percentage> — висота рядка, яка задається у відсотках від розміру шрифта. Наприклад, line-height: 200%; встановлює висоту рядка на 200% від розміру шрифта.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість line-height не є властивістю, що безпосередньо змінює відстань між окремими символами або літерами (це робить властивість letter-spacing). Вона лише визначає вертикальну відстань між рядками тексту.
  • Значення line-height може бути задане як number або length, і це допомагає керувати пропорціями між текстом і його контейнером. number — це відносне значення, яке залежить від шрифта, тоді як length — це абсолютне значення.
  • Важливо, що line-height може впливати на вертикальне вирівнювання контенту в елементах. Це особливо важливо при вирівнюванні тексту або елементів всередині контейнерів.
  • Використання line-height із значенням normal може призвести до неочікуваних результатів при різних шрифтах, тому для кращої контролю треба використовувати конкретні числа або одиниці виміру.
  • У мобільному дизайні та адаптивних макетах коригування line-height може бути важливим для забезпечення комфортного читання на різних екранах.
  • Підтримується всіма сучасними браузерами.