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][1].**

 - **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?**

**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!*

  [1]: http://jsfiddle.net/BadzT/1/