Нет, нет и еще раз нет, line-height — безразмерное свойство

Рассмотрим обычный код css, который при первом взгляде выглядит довольно простым, но постоянно используется неправильно. Начнем с простого вопроса, задаваемого при интервью:

Вы хотите сделать текст на сайте с двойным пробелом по умолчанию. Какой параметр в line-height является наилучшим вариантом?

200%

2em

2

double

Если вы прочитали заголовок этой статьи, то вам уже стало ясно. Давайте рассмотрим подробнее.

Во первых, double — неправильный вариант. Ага, попались! Единственное значение принимаемое line-heigh это normal. То есть, значение 2em несомненно придаст тексту двойной отступ, применив его соответствующему элементу, как и 200%.

Правильный ответ 2.

Что за …?

Возможно это немного смутило вас, ведь браузер может принимать значения в процентах и в length. Давайте разберемся в этом.

Всегда нужно определять line-height, как безразмерное число (повторите это пять раз, смотря в зеркало). Таким образом элементы потомки, имеющие разный font-size, унаследуют это число, вместо фиксированной высоты.

Сделав line-height безразмерной, браузер сохраняет пропорцию font-size/line-height, даже если меняется размер шрифта. К примеру, line-height по умолчанию браузера будет 16px и font size будет 32px, но line-height для заголовков увеличится с 32px до 64px.

Надеюсь этот пример помог вам понять правильный способ использования line-height. Если вы все еще используете length или процентное значение, настоятельно рекомендую вам перейти к безразмерному числу. Это даст вам больший контроль над текстом.

Статью перевел timurziev. Оригинал на Allthingssmitty.com доступен по ссылке.