CSS: Почему происходит смещение изображения при line-height идентичной высоте блока?

Question

[Николай Громов]

Берем блок с фиксированным размером и даем ему line-height такой же, как высота.
Помещаем внутрь картинку с вертикальным выравниванием посередине.
Наблюдаем смещение картинки вниз.
cssdeck.com/labs/mphyqlfj

Как решить проблему — не вопрос (эмуляция ячейки таблицы на сей момент самый разумный способ), вопрос почему такое происходит.
Ведь, теоретически, середина картинки должна встать ровно на середину линии, а последняя проходит по середине блока.

Answer 1

[Евгений Петров]

Вот так происходит выравнивание изображения — по средней линии.
Для примера был выбран шрифт Times New Roman, размер 80px, наклонный.
Безусловно, большое значение имеют параметры шрифта — aspect ratio (это то, что управляется font-size-adjust) и расстояние для нижних выносных линий.

Comments

[Николай Громов]

иными словами, средняя линия — совсем не средняя и то, сколь она «средняя» зависит от выбранного шрифта?

[Евгений Петров]

@nicothin у изображения именно средняя. А вот у шрифта — средняя для высоты строчных символов, и где она окажется, зависит от параметров шрифта.

Я обрисовал абсолютно реальный пример, чтобы было понятно, что границы по размеру шрифта встают симметрично по линии. А вот дальнейшие построения зависят от места расположения базовой линии и аспекта шрифта.
Базовая линия (baseline, она же 0 в вертикальном выравнивании vertical-align) на рисунке — нижняя линия, от которой считается высота строчных символов.

Безусловно, задание 0-го размера шрифта полностью нивелирует разницу между различными гарнитурами:)

[Николай Громов]

именно то, что нужно! спасибо.

Answer 2

[Michael]

потому что в данном случае картинка - инлайновый (а точнее, inline-block) элемент. Величина смещения в данном случае зависит от 2 свойств: размера шрифта и, непосредственно, самого шрифта. Чтобы решить вашу проблему без эмуляции табличного layout'а достаточно задать font-size: 0 обертке.

Comments

[Николай Громов]

все это ясно, я это умею.
меня интересует природа происходящего. )