8

如果 a<div>或任何其他元素跟在<img>a 之后,那么它们之间会出现一个 ~3px 的空格——即使margins是零。

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

这是一些 CSS的样子。

在此处输入图像描述

现在很容易投入display: blockCSS 并解决问题。但为什么会在那里?没有计算的边距、填充、边框或类似的东西。

浏览器在做什么?甚至有人称它为“魔法”

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

4

2 回答 2

13

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

所以换句话说,图像下方有下降的空间。

在此处输入图像描述

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

于 2012-10-28T17:23:45.547 回答
4

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

你有它:

http://jsfiddle.net/xDCEX/

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

http://jsfiddle.net/xDCEX/1/

当然,将其更改为 adisplay: block也可以,但它有其他副作用。如果现在一切正常,那么更改vertical-align是最简单的方法。

于 2012-10-28T17:22:54.107 回答