Div gets extra height for no reason
cross-browser, css, height, html
Solution
Because img is an inline element.
To get rid of that extra height:
.account-picture img {
display: block;
}
Problem
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"?