Предполагается, что строковые замещаемые элементы, такие как изображения, имеют собственную высоту и ширину; например, высота и ширина изображения равны определенному количеству пикселов. Следовательно, замещаемые элементы с собственной высотой могут привести к увеличению высоты контейнера строки по сравнению с обычной. Это не меняет значения свойства 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%;}
<p>Изображение в этом предложении <imgsrc="test.gif" alt="test image"> будет
поднято на 9 пикселов.</p>
Унаследованное значение line-height обусловливает поднятие изображения на девять пикселов, а не на какую-либо другую величину. Если бы значение line-height отсутствовало, было бы невозможно осуществить вертикальное выравнивание с применением процентных значений. Когда речь идет о вертикальном выравнивании, высота самого изображения значения не имеет, важно только значение line-height. Однако для других замещаемых элементов может быть важным передавать значение line-height элементам-потомкам данного замещаемого элемента. К примеру, SVGизображение, которое использует CSS для стилевого оформления любого текста, находящегося в изображении.