css - 为什么和其他元素之间有一个讨厌的小空间？

Question

如果 a<div>或任何其他元素跟在<img>a 之后，那么它们之间会出现一个 ~3px 的空格——即使margins是零。

<img src="example-fractal-art.png">
<div>What is with that gap?<div>

在此处输入图像描述

现在很容易投入display: blockCSS 并解决问题。但为什么会在那里？没有计算的边距、填充、边框或类似的东西。

浏览器在做什么？甚至有人称它为“魔法”。

PS 或者，在某些情况下，可以通过删除HTML 代码中的空格来解决此问题。（但这在这种情况下不起作用，为什么？）

score 13 · Accepted Answer

是 HTML 中的img“替换元素”，因此，它是否被视为字符。现在在没有任何样式的情况下，图像与行上其他字符的基线对齐。

所以换句话说，图像下方有下降的空间。

在此处输入图像描述

正如您所注意到的，将其更改为块会删除此功能。

score 4 · Accepted Answer

默认情况下，图像与文本的基线对齐。因此，如果您将文本放在图像旁边，图像将与的底部对齐x，但在该基线和文本行底部之间有一点空间（显然是 3px）。

你有它：

vertical-align: bottom如果您不想使图像成为块，则可以使用它来解决它。这样，图像仍然是文本的一部分，但不是基线，而是与文本边界框的底部对齐。

当然，将其更改为 adisplay: block也可以，但它有其他副作用。如果现在一切正常，那么更改vertical-align是最简单的方法。

2 回答 2