为什么 <img> 和其他元素之间有一个讨厌的小空间？ [复制]答案

【问题标题】：Why is there a pesky little space between <img> and other elements? [duplicate]为什么 <img> 和其他元素之间有一个讨厌的小空间？ [复制]
【发布时间】：2012-10-18 03:33:21
【问题描述】：

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

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

这是with some CSS 的样子。

现在很容易将display: block 放入CSS 和solve the problem。但为什么会在那里？没有计算出的边距、填充、边框或类似的东西。

浏览器在做什么？甚至有人称它为"magic"。

附注或者，在某些情况下，可以通过 HTML 代码中的removing whitespace 解决此问题。（但在这种情况下，doesn't work，为什么？）

【问题讨论】：

顺便说一句，p 不是内联元素；这是一个障碍！
糟糕！谢谢，拿出来了。我最初写的是span（我自己注意到了），但它有点复杂，所以我把它改成了p，没想到：P

标签： css html image margin removing-whitespace

【解决方案1】：

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

换句话说，图像下方有下降器的空间。

如您所见，将其更改为块会删除此功能。

【讨论】：

将其更改为块的作用远不止于此。
谢谢！我首先阅读了 Golez 的回复，有了相同的想法并尝试了一下，你说得对：jsfiddle.net/Baumr/5z6u9/9——它适合 g、q、y、p 等字母。——很酷！
@Ray，但是您是否注意到两个小提琴中的字母底部之间仍然有一个很小的空间？在您的白色背景中更容易看到。也有道理。
@GolezTrol 当然，但我并不是暗示它没有。

【解决方案2】：

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

你有它：

http://jsfiddle.net/xDCEX/

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

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

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

【讨论】：

啊，是的，你是对的。我现在看到了。李斯特先生给出了答案——它正盯着我们的脸。原因如下：jsfiddle.net/Baumr/5z6u9/9
+1 表示垂直对齐：底部。这解释得最好。
谢谢，是的，你是对的。（对不起，我在你编辑之前起草了。）
将图像保留为inline 元素有什么好处？（并使用vertical-align: bottom;。）谢谢！
优点是可以轻松居中，无需指定宽度。一个块元素占据一整行，除非你开始使用浮动或绝对定位。我不想暗示一种解决方案比另一种更好，只是指出有两种解决方案。您应该选择最适合您的需求。