Высота строки и вычисляемое значение

Немного заметок о том, как считается браузером высота строки. Или почему с этого дня вы начнёте использовать безразмерные значения.

Как я уже выяснила в записи о font-size, высота строки — это сумма базового квадрата, выносных элементов и межстрочного зазора — параметров, индивидуальных для каждого шрифта. При этом line-height может задаваться в любых величинах: px, em, rem, % или без размера. И пиксели здесь самые простые, но и самые неудобные. При изменении размера шрифта придётся заново высчитывать и высоту строки.

Гораздо удобнее использовать величины, вычисляемые от font-size (rem не рассматриваем, потому что он считается от шрифта root-элемента и в этом плане ничем не отличается от px). Но поговорим о em, % и безразмерных величинах. В общем случае они действуют одинаково и являются множителем от размера шрифта. То есть line-height: 2em = 200% = 2 = font-size*2. Однако разница с безразмерной величиной колоссальна: всё дело в наследуемом значении.

Для em и % наследуется вычисленное значение. То есть для родителя со шрифтом 20px и высотой строки 2em браузер посчитает line-height = 40px. Потомок получит те же 40px (а не 2em), независимо от своего размера. Это, кстати, обычное поведение наследуемых значений. Но для line-height безразмерное значение наследуется как есть, то есть потомок получит указанные 2 единицы и вычислит их для своего font-size.

Сложно? Не понятно? Наглядный пример.

See the Pen line-height by AsheGentle (@ashegentle) on CodePen.29275