Масштабирование высоты строки

Как выясняется, самый лучший способ задания line-height состоит в том, чтобы задавать в качестве значений числа без указания единиц измерения. Этот метод лучший потому, что число становится масштабным коэффициентом, и этот коэффициент – наследуемое, а не вычисляемое значение. Скажем, требуется, чтобы значение line-height всех элементов документа в полтора раза превышало их font-size:

body {line-height: 1.5;}

Этот масштабный коэффициент 1.5 передается вниз по иерархии от элемента к элементу, и на каждом уровне коэффициент используется как множитель значения font-size каждого элемента:

p {font-size: 15px; line-height: 1.5;}
small {font-size: 66%;}
big {font-size: 200%;}

This paragraph has a line-height of 1.5 times its font-size. In addition,
any elements within it such as this small element also have
line-heights 1.5 times their font-size...and that includes this big

element right here
. By using a scaling factor, line-heights scale
to match the font-size of any element.



В этом примере высота строки элемента small составляет 15px, а для элемента big – 45px.


(Эти числа могут показаться слишком большими, но они согласуются с дизайном всей страницы.) Конечно, если вы не хотите, чтобы текст элемента big генерировал слишком большой межстрочный интервал, можете задать значение line-height, переопределяющее унаследованный масштабный коэффициент:

p {font-size: 15px; line-height: 1.5;}
small {font-size: 66%;}
big {font-size: 200%; line-height: 1em;}

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

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

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