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