Межстрочный интервал line-height: auto. Что это такое и как его прописывать в css?

Question

[Korsia]

Здравствуйте.
Столкнулась в макете с межстрочным интервалом line-height: auto. Нашла в инете, что это интервал 120% от размера шрифта. Не подскажете, как правильно прописывать значение, чтобы всякий раз его не высчитывать? Или по другому никак?

Answer 1

[Ankhena]

А теперь посмотрите, что будет при наследовании, если писать line-height в процентах: https://jsfiddle.net/enxru3mq/
Красным сделан второй пример, где line-height указан коэффициентом без указания единиц измерения.
Вы же не собирались перебивать line-height для каждого элемента? В таком виде достаточно 1 раз указать его для body или основного контейнера.

Comments

[Korsia]

Пока стоит задача вывести line-height у элементов, которые не имеют своих дочерних элементов, поэтому решение не критичное. В макете, который я верстаю, line-height разные для каждого элемента, поэтому приходится прописывать каждому. Такова жизнь.

[Ankhena]

Korsia, Есть надежные в смысле различных ситуаций решения, а есть нет. В процентах - ненадежное. Верстальщик, за редким исключением, не знает, что потом взрбедет в голову заказчику, но должен предусмотреть по крайней мере то, что легко предусматривается.

[Korsia]

Ankhena, ну тут Вы правы.Что предлагаете в таком случае? Прописывать глобально в body 120% - мне кажется еще не надежней. Если для части текста у меня прописан line-height: auto, альтернативой я могу просто высчитать эту высоту в пикселях и прописать. Допустим, 20px текст, высота 24px. Проблема в неудобстве, так как у меня все шрифты разного размера.

[Ankhena]

Korsia, да я вроде написала и в примере показала: использовать коэффициенты без указания единиц измерения.

В пикселях и размер текста не стоит писать. Разумнее, через проценты и потом rem, так пользователи с увеличенным размером шрифта, будут видеть его увеличенным. Правда, при этом верстальщику придется больше думать о переполнении блоков и правильном отображении при таких настройках тоже.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

Так мы получаем стандартные 16px при том, что 1rem = 10px, что удобно для перевода px в rem.

[Korsia]

Ankhena, для меня rem/em во многих случаях неуместны, поэтому я не всегда их использую. В данном случае я верстаю лендинг, там они просто не нужны (куча мелких блочков с фиксированной высотой). Вот искала частное решение. Вы всегда верстаете в rem/em?

[Ankhena]

Korsia, Шрифт да, в rem|em с начальной установкой font-size: 62.5%;
Другие размеры (не шрифт) в подходящих единицах измерения.
А уж фиксированная высота это совсем страшно.

Один разик попробуйте увеличить размер шрифта в браузере (не масштаб, а именно размер шрифта) и посмотрите сверстанное.
Дальше ваш выбор будет осознанным, жертвовать такими пользователями или нет. Мой выбор тоже не всегда однозначен.

Answer 2

[dom1n1k]

line-height: auto - это значит дефолтный интерлиньяж, прописанный внутри шрифта. Да, в большинстве случаев он составляет около 120-130%, но не обязательно. Это значение не регламентировано никакими стандартами и может плавать (в некоторых случаях даже очень сильно плавать).

Высчитывать его никак не нужно. Если вам нужно auto - так и пишете auto, что тут ещё изобретать? Но в реальной верстке auto обычно не имеет смысла, всегда лучше указывать конкретное значение (за исключением каких-то редких специфических ситуаций).