Урок 40 із 239
17%
← Назад

Значення line-height без одиниць у CSS

Навчіться задавати міжрядковий інтервал за допомогою line-height без використання px.

Значення line-height без одиниць у CSS

Властивість line-height можна задавати не тільки в пікселях, а й простим числом або дробом без одиниць вимірювання.

У цьому випадку браузер автоматично обчислює висоту рядка, множачи значення line-height на розмір шрифту font-size.

Наприклад, якщо font-size дорівнює 20px, а line-height дорівнює 1.5, то реальна висота рядка буде 20px × 1.5 = 30px.

Перевага такого способу в тому, що при зміні розміру шрифту міжрядковий інтервал змінюється автоматично.

<p>
  some long text
</p>
p {
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
  width: 400px;
}
ЗаписРезультат
line-height: 30pxФіксована висота рядка
line-height: 1.5Висота залежить від font-size
  • Числове значення line-height не має одиниць вимірювання.
  • Браузер множить line-height на font-size.
  • Такий спосіб зручний для адаптивного дизайну.
❗ Важливо:

Для font-size 30px і видимого проміжку 15px потрібно отримати висоту рядка 45px. Значення line-height без одиниць: 45 ÷ 30 = 1.5.

📌 Завдання:
  1. Встановіть абзацам розмір шрифту 30px.
  2. Використайте line-height без одиниць.
  3. Зробіть видимий проміжок між рядками 15px.
💡 Показати підказку

Формула: line-height = (font-size + потрібний проміжок) ÷ font-size.

✅ Показати відповідь
p {
  font-size: 30px;
  line-height: 1.5;
}