Что такое line-height — и почему 1.5 и 150% дают разный результат

Смотри, хитрая штука. Ты ставишь line-height: 1.5 — текст дышит. Ставишь line-height: 150% — выглядит ровно так же. Два способа сказать «полтора интервала», результат идентичный.

А потом внутри этого блока появляется крупный заголовок — и в одном из вариантов строки наезжают друг на друга. Причём в том, который выглядит более «явным».

Разберёмся, почему так — и заодно что такое line-height на самом деле.

Line-height — это не отступ между строками

Первое, что ломает интуицию: свойство задаёт не расстояние между строками, а высоту самой строки целиком.

Браузер берёт шрифт, смотрит его естественную высоту (буквы плюс место под хвостики у «р» и «д») и растягивает строку до заданного line-height. Лишнее место делит поровну: половина уходит над буквами, половина под. Это называется half-leading, «половинный интерлиньяж».

Отсюда два следствия, которые постоянно удивляют новичков:

• у самой первой строки абзаца сверху тоже есть пустое место — это не margin, это половина от высоты строки;
• если поставить line-height меньше высоты букв, строка окажется ниже текста, и соседние строки начнут перекрываться. CSS это разрешает, никакой ошибки в консоли не будет.

Значение по умолчанию — normal. Это не число, а «на усмотрение браузера»: MDN даёт ориентир примерно 1,2, и точная величина зависит от шрифта. Поэтому один и тот же CSS с двумя разными шрифтами даёт разную высоту строк — и это не баг.

Почему 1.5 и 150% — это разные вещи

Вот главное. Число без единиц и процент выглядят как синонимы, но наследуются они по-разному.

Число без единиц — наследуется само число. Каждый вложенный элемент умножает 1,5 на свой размер шрифта.

Процент, em или пиксели — браузер считает результат сразу и передаёт детям готовое число пикселей.

Смотри на арифметике. Родитель: font-size: 16px.

• Вариант line-height: 1.5 — у родителя строка 24px. У заголовка внутри с font-size: 32px строка станет 48px. Всё дышит.
• Вариант line-height: 150% — у родителя 16 × 1,5 = 24px, и вниз уезжает именно «24px». Заголовок с font-size: 32px получает строку высотой 24px: буквы выше собственной строки, строки наезжают.

MDN так и пишет: у длин и процентов «плохое поведение при наследовании». Отсюда правило: пиши число без единиц. 1.5, а не 150%.

Кстати, это одна из причин, по которой сгенерированный ИИ CSS иногда разъезжается ровно в одном месте макета: модель охотно подставляет line-height: 150%, потому что так написано в половине старых туториалов.

Сколько ставить

Числа, от которых можно отталкиваться:

• Основной текст — 1.5 и больше. MDN прямо рекомендует минимум 1,5 для абзацев: так легче людям со слабым зрением и с дислексией. Бонус числа без единиц — высота строки масштабируется вместе с текстом, когда пользователь увеличивает шрифт в браузере.
• Крупные заголовки — 1.1–1.25. Чем больше кегль, тем меньше нужен интерлиньяж: у большого текста расстояние и так визуально растёт.
• Кнопки, бейджи, поля ввода — 1. Строка должна быть ровно по тексту, а воздух пусть даёт padding.

Проверить просто: в инспекторе браузера открой вкладку Computed и посмотри на line-height. Если там пиксели, а ты писал число — значит, ты смотришь на унаследованное значение, и оно уже «застыло» выше по дереву.

Сам размер шрифта при этом лучше задавать не в пикселях — но em и rem ведут себя по-разному, и это отдельная ловушка: в чём разница между em и rem.

Где ты с этим столкнёшься

Если пишешь на Tailwind — это классы leading-*. Например, leading-relaxed — ровно line-height: 1.625, то самое число без единиц. В обычном CSS ты выбираешь значение сам, в Tailwind берёшь готовую шкалу; на эту разницу и опирается сравнение Tailwind и чистого CSS.

А если высота строки вроде бы прописана, но на странице всё по-старому — не спеши винить line-height: чаще виноват кэш или специфичность, и разбор трёх причин, почему CSS не применяется, закрывает большинство таких случаев.

Чему равен line-height: normal?

Зависит от шрифта: браузер берёт метрики из самого файла шрифта. MDN называет ориентир «примерно 1,2», точного числа в спецификации нет. Поэтому для предсказуемой вёрстки задавай значение явно, а не полагайся на normal.

Можно ли ставить line-height в пикселях?

Можно, и иногда нужно — например, когда высота строки обязана попадать в модульную сетку. Но помни: пиксельное значение наследуется как есть, и любой элемент с другим кеглем внутри получит чужую высоту строки. Ставь его точечно на конкретный блок, а не на body.

Почему у заголовка строки наезжают друг на друга?

Почти наверняка line-height пришёл к нему по наследству — в пикселях или процентах от родителя с мелким шрифтом. Задай заголовку собственное значение (1.15 или около того), и проблема уйдёт.