CSS

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

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

<p style="line-height: 0.25em;"></p>


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

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


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

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