Строковое форматирование

У всех элементов есть свойство line-height. Его значение оказывает огромное влияние на отображение строковых элементов, так что давайте уделим этому вопросу должное внимание. Во-первых, установим, как определяется высота строки. Высота строки (или высота контейнера строки) определяется высотой составляющих его элементов и другого содержимого, например текста. Важно понимать, что line-height влияет на строковые элементы и другое строковое содержимое, но не на блочные элементы, по крайней мере не прямо. Для блочного элемента можно задать значение line-height, но оно окажет заметное действие, только будучи примененным к строковому содержимому блочного элемента:



Без содержимого абзацу будет нечего отображать – мы ничего не увидим. Каким было значение line-height этого абзаца – 0.25em или 25in – в отсутствие содержимого, необходимого для создания контейнера строки, не имеет никакой разницы. Конечно, можно задать значение line-height для блочного элемента и применить его ко всему содержимому блока независимо от того, есть или нет содержимое в строковых элементах. В определенном смысле тогда каждая строка текста, содержащаяся в блочном элементе, является его собственным строковым элементом независимо от того, окружена она тегами или нет.


Если хотите, изобразим фиктивную последовательность тегов вот так:


Это абзац с рядом
строк текста, которые образуют
содержимое.



Даже несмотря на то, что на самом деле тегов line нет, абзац ведет себя так, как будто они есть: каждая строка текста наследует стили абзаца. Следовательно, достаточно побеспокоиться о создании правила line-height для блочного элемента, чтобы не потребовалось в лоб объявлять line-height для всех строковых элементов, фиктивных или нет. Фиктивный элемент line на самом деле проясняет поведение, проистекающее из задания line-height для блочного элемента.

Согласно спецификации CSS при объявлении line-height для блочного элемента задается минимальная высота контейнера строки для содержимого этого блочного элемента. Таким образом, объявление p.spacious {line-height: 24pt;} означает, что минимальная высота каждого контейнера строки составляет 24 пункта. Формально содержимое может наследовать эту высоту строки, только если это делает строковый элемент. Большая часть текста не входит в состав строкового элемента. Поэтому, если представить, что каждая строка содержится в вымышленном элементе line, модель работает довольно хорошо.

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

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