为什么一个简单的图像得到一个边缘底部c.q.图像下的输出空间？

Question

请查看this simple jsfiddle。它包含以下代码：

<div style="background:yellow; display:inline-block;">
    <img src="http://www.wedesoft.de/test/test.png" />
</div>

如您所见，这将在图像下方输出一个空格，以便您可以看到黄色的容器。我不知道为什么，因为没有定义空间。

有人可以告诉我发生了什么事吗？

Answer 1

图像是inline元素。这意味着它被视为文本。文字有line-height。 line-height是导致底部空间的原因。有多种方法可以解决这个问题。

以下是我的最爱：

div {
    line-height: 0;
}

通过将line-height设置为0，空间就会消失。

img {
    display: block;
}

通过将图片设为block元素，它不再被视为文字，因此line-height不再适用。

---

正如Marc Audet在评论中所说，另一种解决方法是使用vertical-align。

img {
    vertical-align: top;
}

使用top还是bottom无关紧要。

Answer 2

这是由line-height属性引起的;试试这个Jsfiddle 我只是将行高设置为0。

Answer 3

我认为你错过了line-height试试这个

＆＃13;

＆＃13;

<div style="background:yellow;display:inline-block;line-height: 0px;">
    <img src="http://www.wedesoft.de/test/test.png">
</div>

＆＃13;

＆＃13;

＆＃13;

另外，您可以将样式display: block;应用于img。喜欢

＆＃13;

＆＃13;

<div style="background:yellow;display:inline-block;">
    <img src="http://www.wedesoft.de/test/test.png" style="display: block;">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

出于某种原因

display:block;

解决了这个问题，您可以在此处接受的答案中看到： Remove white space below image

仍然不知道为什么......

Answer 5

在此网站上查看有关行高的问题：http://www.w3schools.com/cssref/pr_dim_line-height.asp

基本上发生的事情是div上有一些默认空间，这就是你看到黄线的原因。添加line-height: 0px;可以解决问题。