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

如果< div>或者< img>之后的任何其他元素,然后在它们之间出现~3px的空格 – 即使边距为零.

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

这就是with some CSS的样子.

现在很容易投入显示：阻止进入CSS和solve the problem.但为什么会出现？没有计算的边距,填充,边框或类似的东西.

浏览器在做什么？有人甚至称它为“magic”.

附：或者,在某些情况下,可以在HTML代码中通过removing whitespace解决此问题. (但是在这种情况下doesn’t work,为什么？)

解决方法

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

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

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