Добавление свойств блока

Как вы уже знаете, к строковым незамещаемым элементам могут применяться и отступы, и поля, и рамки. Эти аспекты строкового элемента не оказывают никакого влияния на высоту контейнера строки. Если применить к элементу span рамки без всяких полей или отступов, получится результат. Край рамки строкового элемента контролируется свойством font-size, а не line-height. Иначе говоря, если font-size элемента span равно 12px, а line-height – 36px, то высота его области содержимого составляет 12px, и рамка будет окружать область содержимого. В качестве альтернативы можно назначить в строковом элементе отступ, который отодвинет рамку от текста:

span {border: 1px solid black; padding: 4px;}

Заметьте, что этот отступ не меняет фактическую высоту содержимого, таким образом он не влияет на высоту строкового блока этого элемента. Аналогично добавление рамок в строковый элемент не повлияет на генерирование и компоновку контейнеров строк. Что касается полей, то они практически не применяются сверху и снизу строковых незамещаемых элементов, поскольку не оказывают влияния на высоту контейнера строки. Края элемента – другое дело. CSS2.1 фактически делает размещение полей явным: он определяет свойства margin-top и margin-bottom, применяемые ко всем элементам за исключением строковых незамещаемых, вместо того, чтобы просто объявить, что агенты пользователя должны игнорировать поля сверху и снизу.




Вспомните, что строковый элемент по существу компонуется как единая строка, а затем разбивается на части. Итак, если применять поля к строковому элементу, эти поля появятся в его начале и в конце: это левое и правое поля соответственно. Отступы также появляются по краям. Таким образом, хотя отступы и поля (и рамки) не влияют на высоту строки, они все-таки могут изменять компоновку содержимого элемента, отодвигая текст от его концов. Кстати, отрицательные левое и правое поля могут придвинуть текст к строковому элементу или даже стать причиной перекрытия. Представьте строковый элемент как полоску бумаги, вставленную в рамку. Отображение строкового элемента в виде нескольких строк аналогично разрезанию полоски бумаги. Однако к фрагментам полоски не добавляется часть рамки. Единственная часть рамки – та, которая окружала исходную полоску, поэтому рамка присутствует только в начале и в конце исходных концов полоски бумаги (строкового элемента).

Теперь посмотрим, что происходит, когда у строкового элемента есть фон и отступы, значения которых достаточно велики, чтобы обеспечить перекрытие фона строк. В качестве примера рассмотрим следующую ситуацию:

p {font-size: 15px; line-height: 1em;}
p span {background: #999; padding-top: 10px; padding-bottom: 10px;}

Высота области содержимого всего элемента span равна 15 пикселам, и вы добавили каждой области содержимого 10-пиксельный отступ сверху и снизу.


Дополнительные пикселы не увеличат высоту контейнера строки, и все было бы замечательно, если бы не фоновый цвет.

CSS2.1 явно определяет, что контейнеры строк отрисовываются в порядке представления документа: «В результате рамки последующих строк будут отрисовываться поверх рамок и текста предыдущих». Такой же принцип применяется и к фону. В то же время CSS2 позволял агентам пользователя «„срезать“ рамки и области отступов (т. е. не генерировать их визуальное представление)». Поэтому результаты сильно зависят от того, какой спецификации следует тот или иной агент пользователя.

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

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