Построение блоков

Во-первых, для строковых незамещаемых элементов или фрагмента анонимного текста значение свойства font-size определяет высоту области содержимого. Если font-size строкового элемента – 15px, то высота области содержимого составляет 15 пикселов, потому что все кегельные квадраты элемента имеют высоту 15 пикселов. Затем следует рассмотреть значение свойства line-height элемента и разницу между ним и значением font-size. Если fon-size строкового незамещаемого элемента составляет 15px, а его line-height – 21px, разница – 6 пикселов. Агент пользователя делит шесть пикселов пополам и половину добавляет сверху, а половину – снизу области содержимого; так формируется строковый блок.

This is text, some of which is emphasized, plus other text

which is (strong style="font-size: 24px;")strongly emphasized
and which is

larger than the surrounding text.



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


Таким образом, line-height элемента strong – также 12px. Получается, что для каждой части текста, для которой и font-size, и line-height имеют значение 12px, высота содержимого не меняется (поскольку разница между 12px и 12px равна нулю), т. е. высота строкового блока – 12 пикселов. Однако для текста элемента strong разница между значениями line-height и font-size составляет – 12px. Эта величина делится пополам для определения половинного межстрочного интервала (–6px), и половинный интервал добавляется сверху и снизу к области содержимого для получения строкового блока. Поскольку в обоих случаях мы прибавляем отрицательное значение, в результате получается строковый блок высотой 12 пикселов. Этот строковый блок центрируется по вертикали в границах области содержимого элемента высотой 24 пиксела, поэтому фактически строковый блок меньше, чем область содержимого.

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

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

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