默認情況下圖像底部的5px邊距/邊框/填充？

Question

我一直在試圖讓8張圖片坐在一起，沒有間隙。通常這是一項非常簡單的任務，但由於某種原因，我無法弄清楚這裏發生了什麼。

我把代碼縮減到了最簡單的代碼，但是我不能爲了我的生活找出爲什麼這個例子產生了一個5px的空白background: red。任何人？

Codepen：http://codepen.io/patrickwc/pen/phHKk

代碼（CSS）：

html, body { 
    margin: 0; 
    padding:0; 
    background: red; 
} 

img { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

代碼（HTML）：

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Various_grains.jpg"> 

這就是它！爲什麼圖像沒有齊平到頁面底部？請有人把我從痛苦中解救出來。

Answer 1

圖像是內聯元素，所以像文本一樣，它們在底部有一種排水溝，小寫字母如y，g等會下垂。

設置圖像顯示：塊，你失去了差距。