Высота линии без единиц

Я видел людей, использующих высоту строки без указания единицы, например: line-height: 1.5;

Что представляет число? Я предполагаю, что это соотношение, так что это как em?

Ответ 1

line-height @Mozilla Developer Network имеет очень хорошее объяснение (и примеры), которое легче понять по сравнению с line-height Спецификация CSS.

line-height может иметь значение, указанное одним из следующих способов.

line-height: normal | <number> | <length> | <percentage>

В вашем случае вы используете <number>, который описывается как:

Используемое значение - это единица без <number>, умноженная на размер шрифта элемента. Вычисленное значение совпадает с указанным <number>. В большинстве случаев это предпочтительный способ установки высоты строки без каких-либо неожиданных результатов в случае наследования.

Ответ 2

Да, это соотношение: 1.5 означает в 1,5 раза размер шрифта элемента. Таким образом, это означает то же, что и 1.5 или 150%, но с одним важным исключением: в наследовании, когда используется чистое число, число наследуется, а не вычисленное значение.

Итак, если у вас есть элемент с размером шрифта 24pt, line-height: 1.5 устанавливает высоту строки 36pt. Но если элемент имеет дочерний элемент, то есть внутренний элемент с размером шрифта 10pt и без какой-либо высоты строки, установленный на нем, тогда ребенок наследует значение line-height 1,5, что означает 15pt для этого элемента. Если, с другой стороны, высота линии была установлена на 1.5em или 150%, тогда ребенок наследовал бы вычисленное значение 36pt, создавая гротескное межстрочное расстояние.

Технически это скрыто в

Ответ 3

См. соответствующий spec @W3C:

Используемое значение свойства - это число, умноженное на размер шрифта элемента. Отрицательные значения являются незаконными. Вычисленное значение совпадает с указанным значением.

Итак, как вы уже догадались, это отношение и относится к текущему font-size.

Ответ 4

line-height: X; в основном преобразуется в line-height: (X*100)%;

line-height: 1; совпадает с line-height: 100%;

Аналогично,

line-height: 1.5; совпадает с line-height: 150%;

Где line-height: X%; означает X% высоты строки текущего установленного шрифта и размера для элемента.

Например, если длина строки для элемента в соответствии с текущим установленным шрифтом и размером 24px, line-height: 150% сделает его высоту строки 36px. И так далее.

Ответ 5

Вы также можете использовать rem, чтобы использовать размер корневого em вместо текущего размера шрифта.

Итак, это как высота линии в два раза больше текущего размера шрифта

font-size: 2em;
font-size: 2;

Но это высота строки, вдвое превышающая размер шрифта ROOT

font-size: 2rem;