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

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

p {font-size: 15px; line-height: 18px;}
img {height: 30px; margin: 0; padding: 0; border: none;}

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


Тем не менее свойству line-height замещаемого строкового элемента все-таки присваивается значение. Зачем? Обычно значение необходимо, чтобы правильно позиционировать элемент в случае вертикального выравнивания. Вспомним, например, что процентные значения свойства vertical-align вычисляются относительно значения line-height элемента. Таким образом:

p {font-size: 15px; line-height: 18px;}
img {vertical-align: 50%;}

Изображение в этом предложении будет
поднято на 9 пикселов.



Унаследованное значение line-height обусловливает поднятие изображения на девять пикселов, а не на какую-либо другую величину. Если бы значение line-height отсутствовало, было бы невозможно осуществить вертикальное выравнивание с применением процентных значений. Когда речь идет о вертикальном выравнивании, высота самого изображения значения не имеет, важно только значение line-height. Однако для других замещаемых элементов может быть важным передавать значение line-height элементам-потомкам данного замещаемого элемента. К примеру, SVGизображение, которое использует CSS для стилевого оформления любого текста, находящегося в изображении.

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

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