为什么底部图像和边框之间有填充？

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>