Медная поляна

Прежде несколько слов о наследовании, а уже потом перейдем непосредственно к line-height .

Итак, некоторые свойства в спецификации CSS определены как наследуемые (надпись Inherited: yes в описании конкретного свойства). Это значит, что заданный стиль применяется не только к самому элементу, но также будет распространяться на все его потомки. Яркий пример такого поведения — свойство color .

h1 {color: green;}

<h1>Чтобы почувствовать себя творческим человеком, <del>совершенно</del> необязательно делать что-то из того, что люди называют <em>творчеством</em></h1>

Зеленым стал не только заголовок, но и текст внутри элементов del и em . Если бы цвет текста не был наследуемым свойством, для del и em пришлось бы задавать цвет отдельным правилом, т. к. внутри указанных элементов текст остался бы черным.

line-height тоже является наследуемым свойством, но при работе с ним необходимо учитывать один нюанс. Дело в том, что механизм наследования зависит от того, в каких единицах измерения задана высота строки.

Чтобы было проще разобраться, я подготовил небольшой пример с соответствующими стилями и разметкой:

div {font-size: 10px;}
h1 {font-size: 32px;}
p {font-size: 16px;}
.px {line-height: 24px;}
.percentage {line-height: 150%;}
.em {line-height: 1.5em;}
.number {line-height: 1.5;}

<div class="px">
	<h1>Заголовок...</h1>
	<p>Lorem ipsum ...</p>
</div>
<div class="percentage">
	<h1>Заголовок...</h1>
	<p>Lorem ipsum ...</p>
</div>
<div class="em">
	<h1>Заголовок...</h1>
	<p>Lorem ipsum ...</p>
</div>
<div class="number">
	<h1>Заголовок...</h1>
	<p>Lorem ipsum ...</p>
</div>

Для блоков задан единый размер шрифта div {font-size: 10px;} , размер шрифта для заголовков h1 {font-size: 32px;} и параграфов p {font-size: 16px;} . Меняются только единицы измерения line-height , применяемые к каждому блоку. Разберемся, что к чему:

1. line-height задана в пикселях

   У заголовка и параграфа высо́ты строк одинаковы: 24px. Унаследовано заданное значение высоты строки родителя (24px).

2. line-height задана в процентах

   У заголовка и параграфа высо́ты строк одинаковы: 15px. Унаследовано вычисленное значение высоты строки родителя (10px * 150% = 15px).

3. line-height задана в em

   Ситуация аналогична назначению line-height в процентах (10px * 1.5em = 15px).

4. line-height задана числом

   У заголовка и параграфа высо́ты строк различны. Каждая из них зависит от размера шрифта элемента (а не его родителя) и вычисляется как произведение размера шрифта самого элемента и унаследованного числа-множителя.

   Для заголовка line-height равна 48px (32px * 1.5), а для параграфа — 24px (16px * 1.5).

Обратите внимание, в первых трех вариантах не играет роли, каковы размеры шрифта заголовка и параграфа, заданы ли эти размеры вообще, или нет, поскольку наследуется вычисленное (или заданное, как в случае с px) значение высоты строки родителя.

Четвертый вариант предлагает более гибкое, масштабируемое решение. Здесь наследуется только само число (коэффициент масштабирования), и у каждого элемента-потомка высота строки вычисляется с учетом его собственного размера шрифта.

P.S. Из-за того, что я чуть-чуть поднаторел в понимании Javascript пришлось переписать скрипт для заметки Всплывающая подсказка для картинок-ссылок.