为什么<img>和其他元素之间有一个讨厌的小空间？

Question

如果a <div>或任何其他元素跟随a <img>,则它们之间会出现~3px的空格 - 即使margins它们为零.

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

这是一些CSS的样子.

在此输入图像描述

现在很容易display: block进入CSS并解决问题.但为什么会这样呢？没有计算的边距,填充,边框或类似的东西.

浏览器在做什么？有人甚至称它为"神奇".

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

Answer 1

这img是HTML中的"替换元素",因此,它被视为一个字符.现在,在没有任何样式的情况下,图像与线上其他字符的基线对齐.

换句话说,图像下方有下降空间.

在此输入图像描述

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

Answer 2

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

你有它：

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

当然，改成adisplay: block也可以，但是有其他副作用。如果现在一切正常，改变vertical-align就是简单的方法。