Css 为什么一个简单的图像在图像下会有一个边距底部c.q.输出空间？

请看一看。它包含以下代码：

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

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

---

有人能告诉我发生了什么吗？

这是由于

行高属性造成的；试试这个
因为某种原因，我刚刚将线高度设置为0。

display:block;

解决了此问题，如您在此处接受的答案中所示：

仍然不知道为什么…
图像是一个
内联元素。这意味着它被视为文本。文本具有
行高
。
行高
是导致底部空白的原因。有多种方法可以解决这个问题

以下是我的最爱：

div {
    line-height: 0;
}

通过将
行高设置为0，空格消失

img {
    display: block;
}

通过使图像成为
块
元素，它不再被视为文本，因此，
行高
不再适用


正如Marc Audet在评论中所述，解决此问题的另一种方法是使用
垂直对齐

img {
    vertical-align: top;
}

无论您使用的是
top
还是
bottom
我想您错过了
行高
试试这个
查看此web上的线条高度属性：

最基本的情况是div上有一些默认的空格，所以你会看到黄线。添加
行高：0px应该可以解决问题。
可能重复的或@user3631654请确保为将来的访问者标记一个awnser；）您可能想提及的是，应用
垂直对齐：顶部或底部
也可以解决问题。@Danko删除
内联块
不会解决问题，因为图像将保持
内联
，这是问题的原因。你可以打开并看到它不会改变底部的房间@马克·奥德特：我会更新我的答案。非常感谢。