Question

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

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

以下是with some CSS的内容。

enter image description here

现在很容易将display: block引入CSS和solve the problem。但为什么会这样呢？没有计算的边距，填充，边框或类似的东西。

浏览器在做什么？有人甚至称它为"magic"。

P.S。或者，在某些情况下，可以通过HTML代码中的removing whitespace来解决此问题。（但在这种情况下doesn't work，为什么？）

Answer 1

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

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

enter image description here

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

Answer 2

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

你有它：

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

当然，将其更改为display: block也有效，但它有其他副作用。如果一切正常，那么改变vertical-align是一种简单的方法。