В чем разница между высотой строки: 1,5 и высотой строки: 150% в CSS?

Question

Кто-нибудь знает об этом?

Answer 1

Короткая версия: line-height: 150% является статическим, line-height: 1.5 является динамическим. Эффект более очевиден в отношении наследования элементов. Пример:

HTML

<div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>

Это CSS

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */

В противоположность этому:

div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */

Вы можете прочитать больше на странице спецификаций CSS2

Answer 2

Оба эквивалентны.

line-height: 1.5 (без единиц) приведет к изменению размера шрифта элемента на 1.5 для вычисления высоты строки.

line-height: 150% примет 150% вычисленного размера шрифта элемента размера шрифта для вычисления высоты строки, что эквивалентно умножению ее на 1.5.

Три правила в приведенном ниже примере имеют одинаковую высоту строки:

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

Теперь давайте взглянем на вопрос, который вы задали .

Я воспроизвел два случая:

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

В 1) элемент line-height родительского элемента div установлен на 1.5, умноженный на фактический размер шрифта элемента div. Это свойство наследуется и пересчитывается для дочернего элемента span, поскольку вы изменили его фактический размер шрифта.

В 2) * div родительского элемента line-height устанавливается равным 150% вычисляемого размера шрифта div. Затем вычисленный размер шрифта span наследуется от div, поэтому 150% этого унаследованного вычисленного размера шрифта приводит к тому же значению.

Как подытожил @K Prime, вероятен вычет: line-height: 150% статично, line-height: 1.5 динамично

Ссылки

• 10.8 Расчет высоты строки: свойства 'line-height' и 'vertical-align' (CSS2)

Answer 3

line-height:  normal | 

<number>| 

<length>| 

<percentage>

С line-height

<number>

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

<percentage>

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