CODEWITHSUNDEEP
htmlcss
Elliot
Elliot

Reputation: 13845

CSS line-height with image not being applied

I have an image in a div, lets say like so:

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

The style for the div, is line-height:36px;

The image's height is 12px

This code lives on many web sites (think a button / badge etc.) - it essentially always works. But occasionally the div collapses around the image, and I'm trying to figure out why.

If I place an &nbsp; next to the image, the line-height begins to work again.

Setting the image to inline, giving the div a specific font-size, did not seem to make a difference

Upvotes: 1

Views: 4796

Answers (3)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

Apply a new style to div :

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

May this helps you.

Upvotes: 1

Alohci
Alohci

Reputation: 83125

Probably it's because the img has been set to display:block. In such a case, there is nothing left to form a line box. If there's no line box, there's nothing for line-height to be applied to.

Possibly floating the img may also be confusing the matter, because that will also leave nothing to create the line box. But in this situation, the div will collapse to 0 height, rather than wrap just around the image.

See http://jsfiddle.net/p6Jzt/1/

Upvotes: 1

mahish
mahish

Reputation: 1135

try div { font-size: 0; }, its height must be same as its line-height

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

Upvotes: 0

Related Questions