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

Question

我在div中有一个图像，我在div中设置了一个像素边框，但在边框和图像之间的底部有一个填充。有人可以解释一下原因吗？

这是我的HTML代码：

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

这是我的css：

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

Answer 1

将vertical-align:top用于图片

Answer 2

除非您的css指定，否则浏览器会应用默认样式，请尝试在您的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>