Parent div，height not set，over-sizes height by several pixels to fit child img element height？爲什麼？

Question

在所有主流瀏覽器：如問題所述，父母<div>容器（其高度未設置）超過其高度以適合子元素<img>元素（例如，300像素高的圖像是唯一的裏面的東西div）。超大尺寸通常大約爲3到5個像素，並且首先顯示爲img margin-bottom或div padding-bottom可能看起來。

但是，使用絕對定位，清楚地表明div的底部低於img的底部幾個像素。它可能不會破壞網站的設計，但在某些情況下克服這個障礙是一個障礙。 I have made a fairly detailed fiddle demonstrating this issue here。

• 爲什麼在Web瀏覽器中這個標準實踐？
• 這是否意味着要補償一些東西？這似乎沒有必要。
• 這是一個錯誤，或即將過時的功能？

編輯：多虧了應答者/下方評論，我知道原因是，一個<img>被默認視爲CSS display:inline它保留了元件的周圍空白。 將其更改爲display:block完全解決了由 排除的問題，消除了元素周圍的空白。

注：這種過度大小可以通過給圖像子元素的float:left或float:right等CSS屬性是可以避免的，但是這是一個解決辦法，因此是不的回答這個問題。這可能是有問題的原因之一是，如果你已經有其他float元素分層前的div子圖像（浮動重疊不允許Firefox，歌劇，IE。float重疊，似乎只允許在Chrome和Safari使用CSS position設置）。 謝謝！

Answer 1

將顯示：塊添加到您的圖像。我認爲這將解決問題。