Why is the height of DIVs containing images inflated by 4.5px?

Question

This div will have a computed height of 104.5px (in most recent Chrome, FF, and IE)

<div><img src="" height="100px" /></div>

This div will have a computed height of 100px

<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>

I used FireBug to look at the DIVs and IMGs, and both IMGs have 0 for margin, padding, and border, yet the computed height somehow is 4.5px bigger in the first instance.

Why is this? It impacts me when I try to layout a page with a consistent vertical grid. Ideally, I'd like to not have to float the imgs.

I tried to look here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 and I even tried vspace=0, but that didn't change anything.

Thanks for your help!

Answer 1

I use Yahoo! CSS Reset to get my browsers all starting from scratch, usually helps.

Answer 2

clients include their own stylesheets that should be overidden before you try to do any pixel-perfect layouts or cross-browser debugging. Even if you remove all your stylesheets there are still styles on the page.

Try it again with a css reset at the top of your stylesheet. Also, make sure that you're declaring a valid doctype. Use a strict doctype and make sure your code validates if that still doesn't help.

I usually use the meyer web reset with a few minor modifications that suit my workflow.

If other people are seeing 100px then it's likely a client side problem, so hopefully this troubleshoots it for you.

Answer 3

Setting <div style="display:inline" /> should fix your problem.

Answer 4

There must be more going on here than what you show. How are you measuring these half pixels? What tool are you using? I can see line-height coming into play but you don't show that in your sample.