Высота строки и наследование

Если свойство line-height наследуется одним блочным элементом отдругого, все становится еще запутаннее. Свойство line-height наследует вычисленные значения родительского элемента, а не дочернего. Скорее всего, это не то, что имел в виду автор:

body {font-size: 10px;}
div {line-height: 1em;} /* получается '10px' */
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, but the inherited 'line-height'
value is only 10px. This may cause the lines of text to overlap each other by
a small amount.




Почему строки расположены так близко друг к другу? Потому что значение line-height, равное 10px, было унаследовано абзацем от его родителя div. Одно из решений, позволяющее справиться с трудностями, порожденными line-height, состоит в том, чтобы явно задать line-height для каждого элемента, но это непрактично. Лучше определять число, которое задает коэффициент масштабирования:

body {font-size: 10px;}
div {line-height: 1;}
p {font-size: 18px;}

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


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

div {line-height: 1.5;}
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, and since the 'line-height' set for
the parent div is 1.5, the 'line-height' for this paragraph is 27px (18 * 1.5).




Кажется, что line-height выделяет дополнительное пространство над и под каждой строкой текста, но на самом деле он добавляет (или вычитает) определенную величину над и под областью содержимого строковых элементов для создания строкового блока. Предположим, что по умолчанию задано значение font-size, равное 12pt, и рассмотрим следующее правило:

p {line-height: 16pt;}

Поскольку унаследованная высота строки 12-пунктного текста составляет 12 пунктов, предыдущее правило добавит к каждой строке текста в абзаце поле в 4 пункта. Эта дополнительная величина разбивается пополам, и одна половина располагается над каждой строкой, а другая половина – под строкой. Теперь расстояние между базовыми линиями составляет 16 пунктов, что является косвенным результатом распределения дополнительного пространства. Если задать значение inherit, то элемент унаследует вычисляемое значение своего родительского элемента. Это не слишком отличается от обычного наследования значения, за исключением того, что касается специфичности и каскада. Итак, вы овладели азами построения строк, и пора поговорить о вертикальном выравнивании элементов относительно контейнера строки.

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

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста