Div gets extra height for no reason

Question

I have some markup like so:

<div class="account-picture">
    <img src="http://i.imgur.com/Mcr3l.png">
</div>

The div needs to be floated left. The image is 128px x 128px.

And some css:

.account-picture{
   float: left;
   background: #FFFFFF;
   padding: 10px;
   border: 1px solid red;
   font-size: 1px;
   overflow: hidden;
}

img{
   border: 1px solid #F8F8F8;
   overflow: hidden;
}

But the problem is there seems to be some extra height assigned to the div. The layout diagrams from firebug are as follows:

Why is the height of the div getting 2 extra pixels? Why does it vary across browsers?

• Firefox 12: 2px extra
• IE9: 0.26px extra
• Chrome: 0px extra.

And here's a fiddle: http://jsfiddle.net/mWe5Y/

Why is this happening, and how do I get rid of that extra "height"?

Answer 1

Because img is an inline element.

To get rid of that extra height:

.account-picture img {
    display: block;
}