21.03.2008

CSS: line-height

Как-то я долго мучился с line-height.

Задавал его в em и процентах у body и были жуткие глюки с наследованием.

Я уже было отчаялся и решил жахнуть стиль для звездочки:
* {line-height: 1.4em;}

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

Оказывается, если указывать line-height в em или %, то при наследовании браузеры не пересчитывают line-height в зависимости от размера шрифта текущего элемента. Из-за этого у меня в <h1> слипались строчки.

А если указывать просто число без единиц измерения, то пересчитывают. То есть берут размер шрифта текущего элемента, умножают на это число и получается высота строки текущего элемента.

4 комментария:

Андрей комментирует...

Мои мучения были аналогичными. Строки при крупном кегле слипались. И тогда я открыл для себя значение в виде множителя (без размерности). А всего-то надо было просто освежить знания CSS! :-) Отныне пользуюсь исключительно множителем. И только в специальных случаях — размерностью.

do комментирует...

Ой, буквально неделю назад мучался!
Тоже указывал в em и %. И никак не мог справиться с глюками.
В блоке был вложенный span с размером шрифта МЕНЬШЕ основного - так этот спан раздвигал высоту строки на пару пикселов!
Я был в шоке: шрифт меньше, а высота строки увеличивается! Причём в разных браузерах. Логику сего я так и не понял.

Vitaly комментирует...

Спасибо, Степан, очень помогли.

Blog комментирует...

Вот оно что! Я тоже не знал и тоже мучался - спасибо!