CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Рис. 7.43. Перекрытие строк фоном

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

р {font-size:15рх; line-height:1em;}

р span {background:#999; padding-top:Юрх; padding-bottom:Юрх;}

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

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

Строковые замещаемые элементы

Предполагается, что строковые замещаемые элементы, такие как изображения, имеют собственную высоту и ширину; например, высота и ширина изображения равны определенному количеству пикселов. Следовательно, замещаемые элементы с собственной высотой могут привести к увеличению высоты контейнера строки по сравнению с обычной. Это не меняет значения свойства line-height любого элемента строки, включая сам замещаемый элемент. Вместо этого контейнер строки просто становится достаточно высоким, чтобы вместить замещаемый элемент, н к нему добавляются любые свойства блока. Иначе говоря, для определения строкового блока элемента используется весь замещаемый элемент - его содержимое, поля, рамки и отступы. Применение следующих стилей приводит к результату, показанному на рис. 7.44:

р {font-size:15рх; line-height:18рх;>

img {height:ЗОрх; margin:0; padding:0; border:none;}

Несмотря на все это пустое пространство, эффективное значение line-height не изменилось ни для абзаца, ни для самого изображения. Про