如果 a<div>
或任何其他元素跟在<img>
a 之后,那么它们之间会出现一个 ~3px 的空格——即使margins
是零。
<img src="example-fractal-art.png">
<div>What is with that gap?<div>
这是一些 CSS的样子。
现在很容易投入display: block
CSS 并解决问题。但为什么会在那里?没有计算的边距、填充、边框或类似的东西。
浏览器在做什么?甚至有人称它为“魔法”。
是 HTML 中的img
“替换元素”,因此,它是否被视为字符。现在在没有任何样式的情况下,图像与行上其他字符的基线对齐。
所以换句话说,图像下方有下降的空间。
正如您所注意到的,将其更改为块会删除此功能。
默认情况下,图像与文本的基线对齐。因此,如果您将文本放在图像旁边,图像将与 的底部对齐x
,但在该基线和文本行底部之间有一点空间(显然是 3px)。
你有它:
vertical-align: bottom
如果您不想使图像成为块,则可以使用它来解决它。这样,图像仍然是文本的一部分,但不是基线,而是与文本边界框的底部对齐。
当然,将其更改为 adisplay: block
也可以,但它有其他副作用。如果现在一切正常,那么更改vertical-align
是最简单的方法。