Безразмерная высота строки

Версия для печати

Свойство line-height может принимать числовые значения без указания единицы измерения (px, em, %). Можно задать значение в одной из допустимых единиц измерения, но лучше этого не делать. Безразмерные значения более удачны для этого свойства CSS.

Так в чем же различия? Когда вы определяете значения в каких-либо единицах, например, в em, то эти значения наследуются всеми потомками элемента, к которому это правило применено. Например, для следующих разметки и стилей:

<ul>
  <li>I'm a list item with <small>small text</small>.</li>
</ul>

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}

Элемент ul принимает значение line-height в 15px, так как высота строки элемента со значением в единицах em вычисляется в зависимости от величины шрифта этого элемента. Я непосредственно указываю значение свойства font-size, таким образом мы можем вычислить значение line-height в пикселях. (Да, я знаю, текст, указанный в пикселях, — это зло, но так намного проще объяснить, как всё это работает.)

Так что вычисленное значение в 15px — это именно то значение, которое получат элементы-потомки. Элементы li и small унаследуют значение line-height, равное 15px. Они не будут пересчитывать это значение в зависимости от их собственных значений font-size; по сути они вообще его не изменят. Они только возьмут это значение в 15px и используют его, точно так же как если бы я указал:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

Хорошо, а сейчас мы уберем em из значения line-height, так что стили будут выглядеть так:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}

Сейчас это общее значение, которое используется элементами-потомками как множитель, а не вычисленное значение.

Таким образом, каждый наследуемый элемент возьмет значение line-height родителя и умножит его на собственное значение font-size. Элемент списка li со значением font-size в 10px будет иметь высоту строки в 10px, а элемент small с размером шрифта 8px (80% от величины font-size элемента li) получит значение line-height — 8px.

В конце концов, результат будет эквивалентен следующему:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

Это очень значимое отличие. Поэтому крайне рекомендуется указывать высоту строки без единиц измерения, если вы хотите настроить её относительно высоты строки элемента html или body, или вообще любого родительского элемента.

Вывод: свойство line-height может принимать безразмерные значения и тем самым использоваться в качестве множителя, и в 99 случаях из 100 лучше указывать это свойство именно без единиц измерения.