CSS line-height with image not being applied

Question

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   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

My first guess is that the CSS rules for your code snippet are being over written by other more specific rules. I can't quite see how to reproduce the "collapses around the image" effect. — Marc Audet, Sep 10 '13 at 19:35
Why not use a height on the DIV and not use Line-Height for the size? — Travis, Sep 10 '13 at 19:47

score 1 · Accepted Answer · edited Sep 11 '13 at 10:10

1

Apply a new style to div :

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

May this helps you.

edited Sep 11 '13 at 10:10

keshu_vats

452
6
45

answered Sep 10 '13 at 19:27

Ankit Agrawal

6,034
6
25
49

It does look like this works - I have to do a bit more testing, can you explain why? – Elliot Sep 10 '13 at 19:38
when we didn't give height of any element with image line height doesn't work – Ankit Agrawal Sep 10 '13 at 19:40

Alohci · Answer 2 · 2013-09-10T21:20:18.503

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/

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

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?

edited May 23 '17 at 12:30

Community

1
1

answered Sep 10 '13 at 19:33

mahish

975
7
15

CSS line-height with image not being applied

3 Answers3