Parent div, height not set, over-sizes height by a few pixels to fit child img element height? Why?

In all major browsers: as the question states, a parent `<div>` container (whose height is not set) over-sizes its height to fit a child `<img>` element (for instance, a 300-pixel tall image that is the only thing inside the `div`). The over-sizing is usually about 3 to 5 pixels, and appears at first as img `margin-bottom` or div `padding-bottom` might look. However, using absolute positioning, it is clearly demonstrated that the bottom of the `div` is below the bottom of the `img`by a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here. - Why is this standard practice in web browsers? - Is this meant to compensate for something? It seems unnecessary. - Is this a bug, or a soon-to-be antiquated feature? EDIT: Thanks to the answerers/commentators below, I know the reason is that an `<img>` is treated by default as CSS `display:inline` which preserves whitespace around the element. Changing it to `display:block` completely fixes the problem by eliminating whitespace around the element. Notes: This over-sizing can be averted by giving the image child element a CSS property of `float:left` or `float:right`, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other `float` elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. `float` overlapping only seems allowed in Chrome and Safari using CSS `position` settings). Thanks!