Свойство line-height: ритм текста
Как выбрать высоту строки для абзацев и почему удобно безразмерное значение.
Как это работает
line-height определяет высоту строкового бокса. Для длинного текста расстояние между строками сильно влияет на удобство чтения. Слишком тесные строки сливаются, а слишком большие интервалы разрывают абзац на несвязанные полосы.
Безразмерное значение, например 1.6, умножается на собственный размер шрифта элемента. При наследовании это обычно предсказуемее фиксированной высоты в пикселях. Для заголовков часто нужен меньший множитель, чем для основного текста.
Пример в интерфейсе
p { font-size: 17px; line-height: 1.65; max-width: 30rem; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| 1.6 | Множитель текущего font-size. |
| normal | Значение, зависящее от браузера и шрифта. |
| 24px | Фиксированная высота строки. |
| Наследование | Безразмерный множитель адаптируется к потомкам. |
На что обратить внимание
Не центрируйте многострочный текст огромным line-height. После переноса расстояние между строками станет чрезмерным; для центровки блока есть Flexbox.
Проверьте на практике
Сравните множители 1.2, 1.6 и 2 на абзаце из пяти строк. Выберите значение, при котором легко возвращаться взглядом к началу следующей строки.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.