來自這些圖像的額外空間在哪裏？

Question

我有一個問題，我在各種瀏覽器中複製。

我有divs與每個圖像包裝http://jsfiddle.net/QnVYL/。包裝有1px邊框和5px填充。裏面的圖像大小爲100％寬度。

由於某些原因，圖像底部和其包裝底部之間的距離超過5px。看看填充圖像在圖像的各個方面看起來是否相等？似乎從某處添加了3個像素。 Firebug不讓我知道從哪裏來。

我該如何擺脫空間？我無法使用絕對定位來僞造填充，因爲我不確定我會始終知道圖像的確切高度。

非常感謝幫助！

Answer 1

這是一個已知的問題。請嘗試：

img { 
    display: block; 
}  

Answer 2

如果添加img {display:block}

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 3

就像我猜對了沒有額外的間距顯示attribut：

#container { 
    display:block; 
    width: 50%; 
    margin: auto; 
    margin-top: 100px; 
} 

Answer 4

這是行高。默認情況下，圖像呈現爲內嵌塊元素。行高可以確保下面的文本不會粘到圖像喜歡這裏：

<img...><br>foo 

這兩個補丁是有用的，視情況而定：

.imgContainer { line-height: 0; } 

img { display: block; }