Управление свойством line-height


Из предыдущих разделов мы знаем, что изменение line-height строкового элемента может привести к перекрытию одной строки текстом другой. Хотя в каждом случае изменения осуществлялись в отдельных элементах. Как же оказать на line-height элементов более глобальное влияние, чтобы уберечь содержимое от наложения? Один из способов – применить в элементе, значение font-size которого изменилось, для задания line-height единицы измерения em. Например:

p {font-size: 14px; line-height: 1em;}
big {font-size: 250%; line-height: 1em;}


Not only does this paragraph have "normal" text, but it also

contains a line in which some big text is found.

This large text helps illustrate our point.



Задавая line-height для элемента big, мы увеличиваем общую высоту строкового блока, обеспечивая достаточное пространство для отображения элемента big без перекрытия какого-либо другого текста и без изменения line-height всех строк параграфа. Задано значение 1em, поэтому свойству line-height элемента big будет присвоено такое же значение, как и у свойства font-size элемента big. Помните, line-height задается относительно font-size самого элемента, а не его родителя.

Обратите внимание, что следующие стили могут обеспечить результаты:

p {font-size: 14px; line-height: 1;}
big {font-size: 250%;}

Значения line-height не наследуются как масштабные коэффициенты, поэтому и для элемента p, и для элемента big значение line-height равно 1.


Высота заданного таким образом строкового блока совпадала бы с высотой области содержимого точно так. Убедитесь, что вы действительно поняли материал предыдущих разделов, потому что дальше, когда вы попытаетесь добавить рамки, все будет еще сложнее. Скажем, требуется установить вокруг всех гиперссылок рамки шириной 5 пикселов:

a:link {border: 5px solid blue;}

Если не задать свойству line-height значение, достаточно большое для вмещения рамки, возникнет опасность наложения строк. Конечно, можно увеличить размер строкового блока для непосещенных ссылок, задав line-height, как вы делали это для элемента big в предыдущем примере; в этом случае достаточно задать значение line-height, на 10 пикселов превышающее значение font-size для этих ссылок. Однако это сделать трудно, если неизвестен размер шрифта в пикселах. Другое решение – увеличить line-height абзаца. Тогда изменятся все строки всего элемента, а не только строка, в которой находится гиперссылка, помещаемая в рамку:

p {font-size: 14px; line-height: 24px;}
a:link {border: 5px solid blue;}

Поскольку над и под каждой строкой есть дополнительные промежутки, рамка вокруг гиперссылки не вторгается ни в одну другую строку.


Здесь этот подход эффективен, конечно, потому, что весь текст имеет один размер. Если бы в строке присутствовали другие элементы, влияющие на высоту контейнера строки, ситуация с рамками тоже могла бы измениться:

p {font-size: 14px; line-height: 24px;}
a:link {border: 5px solid blue;}
big {font-size: 150%; line-height: 1.5em;}

Согласно этим правилам высота строкового блока элемента big составит 31,5 пиксела (14×1.5×1.5), и такой же будет высота контейнера строки. Чтобы сохранить интервалы между базовыми линиями одинаковыми, необходимо сделать line-height элемента p равным или большим, чем 32px.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание