css - 为什么一个简单的图像会得到 margin-bottom 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

图像是一个内联元素。这意味着它被视为文本。文本有一个 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都没有关系。