为什么和其他元素之间有一个烦人的小空格？

Question

41 浏览2023年5月21日

匿名的 2022年7月14日

0 Comments

这个问题已经有答案了:

div中的图片下面有额外的空白

如果一个或任何其他的元素跟随一个，那么它们之间会出现大约3像素的空格，即使margins为零。


What is with that gap?

这是一些CSS的效果。

$\"enter$

现在很容易在CSS中插入display:block并解决这个问题。但是为什么会出现这个问题呢？没有计算出的边距、填充、边框或类似的东西。

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

另外，在某些情况下，可以通过在HTML代码中删除空白来解决这个问题。（但是在这种情况下，这个方法不起作用，为什么？）

admin 更改状态以发布 2023年5月21日

0

匿名的 · Answer 1 · 2022-07-14T20:57:58+00:00

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

你可以在这里找到它：

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

当然，将其更改为display: block也可以解决此问题，但它会产生其他副作用。如果现在一切正常，请更改vertical-align。

匿名的 · Answer 2 · 2022-07-14T20:57:58+00:00

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

换句话说，图像下方有一些下行字母的空间。

enter image description here

将其改为块级元素会移除该特性，正如您所注意到的。