Что такое `line-height` и как работают unitless-значения?

Question

Accepted Answer

## Важный нюанс

`line-height` задаёт высоту строки текста. Формы записи:

- число без единицы: `1.5` — **множитель** от `font-size` элемента;
- длина: `24px`, `1.5rem`;
- процент: `150%`.

**Unitless** предпочтителен: множитель **наследуется как число**, и каждый потомок считает `line-height = factor × свой font-size`.

Если задать `line-height: 150%` или `24px` на родителе, потомок **наследует уже вычисленную длину**, и при другом `font-size` межстрочный интервал может «ломаться».

```css
body { line-height: 1.5; } /* хорошо */
h1 { font-size: 2rem; }    /* line-height станет 3rem */
```