爲什麼底部圖像和邊框之間有填充？

Question

我有一個div內的圖像，並且我將1像素邊框設置爲div，但邊框和圖像之間的底部有填充。任何人都可以解釋爲什麼？

這裏是我的html代碼：

<div id="border"><img src="example.png" /></div> 

這裏是我的CSS：

#border { 
    border: 1px solid #000; 
    float: left; 
} 

Answer 1

使用vertical-align:top圖像，除非你的CSS指定

Answer 2

瀏覽器應用的默認樣式，儘量明確在你的CSS設置填充。

Firebug具有一個有用的功能，可以讓您查看哪些樣式已應用於頁面上的元素。

希望這有助於

Answer 3

確保圖像同時具有填充和邊距設置爲0，如：

img{padding:0;margin:0} 

或者，改變只是圖像，應用類，以特定的形象，並設置該類的風格，例如

<img class="foo"> 

.foo {padding:0;margin:0} 

Answer 4

您是雙關你的img標籤：

你有

<div id="border"><img src="example.png" /></img></div> 

應該是：

<div id="border"><img src="example.png" /></div>