CSS высота строки с изображением не применяется

Question

У меня есть изображение в DIV, позволяет сказать, например, так:

<div> 
<img src="myimage.png"> 
</div> 

стиль для DIV, это высота строки: 36px;

высота изображения составляет 12px

Этот код живет на многих веб-сайтах (думаю, кнопка/значок и т.д.) - это практически всегда работает. Но иногда div обрушивается вокруг изображения, и я пытаюсь понять, почему.

Если я поместил рядом с изображением  , линия-высота снова начнет работать.

Настройка изображения встраивать, давая Див конкретный размер шрифта, кажется, не делают разницы

Answer 1

применить новый стиль к DIV:

<div style="display:list-item;"></div> 

Пусть это поможет вам.

Answer 2

попытка div { font-size: 0; }, его высота должна быть такой же, как ее высота линии

Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?

Answer 3

Вероятно, это потому, что IMG был установлен в display:block. В этом случае нет ничего, что могло бы привести к созданию строки. Если нет строки строки, для линии-высоты не нужно применять.

Возможно, плавание img также может ввести в заблуждение вопрос, потому что это также не оставляет ничего, чтобы создать поле строки. Но в этой ситуации div будет рушиться до 0 высоты, а не обтекать изображение.

См http://jsfiddle.net/p6Jzt/1/