Why is a block level element higher than the image it contains?

Question

Without height specifications, a <div> (or a <p> or any other similar element) that contains only a single image is a bit higher than it. It looks like its 4px higher in Firefox and 5px higher in Chrome (according to Firebug and its chrome equivalent). The extra space is added under the image.

Obviously I can fix this by assigning a height to the div, but I'd like to understand why that space is there and wether there is a way to eliminate it.

Answer 1

Add line-height: 0px; to the containing element.

Setting the img to display:block also works but may break if someplace else you're hiding and showing images with display:none / display:inline.