Урок 39 із 239
16%
Міжрядковий інтервал у CSS
Навчіться керувати висотою рядків тексту за допомогою властивості line-height.
Міжрядковий інтервал у CSS
Для зміни відстані між рядками тексту в CSS використовується властивість line-height.
Важливо розуміти, що line-height задає не тільки проміжок між рядками, а всю висоту рядка тексту.
Видимий проміжок між рядками обчислюється за формулою: line-height - font-size.
<p>
some long text
</p>p {
font-size: 20px;
line-height: 50px;
text-align: justify;
width: 400px;
}| Властивість | Призначення |
|---|---|
| font-size | Розмір тексту |
| line-height | Висота рядка тексту |
| text-align | Вирівнювання тексту |
- line-height не задає тільки відстань між рядками.
- Для читабельного тексту зазвичай використовують line-height більше за font-size.
- Великий міжрядковий інтервал робить текст легшим для читання.
❗ Важливо:
Якщо font-size дорівнює 30px, а потрібний видимий проміжок між рядками 15px, то line-height повинен бути 45px.
📌 Завдання:
- Встановіть розмір шрифту для абзаців 30px.
- Налаштуйте line-height так, щоб видимий проміжок між рядками був 15px.
💡 Показати підказку
Пам'ятайте формулу: line-height - font-size = видимий проміжок. Додайте потрібний проміжок до розміру шрифту.
✅ Показати відповідь
p {
font-size: 30px;
line-height: 45px;
}