Какая разница между высотой линии: 1,5 и высотой линии: 150% в css?

Ответ 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

Ответ 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 */

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

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

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

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

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

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

Литература:

• 10.8 Расчет высоты линии: свойства "высота строки" и "вертикальное выравнивание" (CSS2)

Ответ 3

line-height:  normal | 

<number>| 

<length>| 

<percentage>

От line-height

<number>

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

<percentage>

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