为什么会有之间的讨厌的小空间 和其他元素？(Why is there a pesky litt

如果一个<div>或任何其它元件遵循<img>则〜3PX空白出现在它们之间-即使margins被zero'd。

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

下面是它看起来像一些CSS 。

现在，它很容易在扔display: block到CSS和解决的问题 。 但为什么呢？ 有没有计算利润率，填充，边框，或类似的东西。

什么是浏览器做什么？ 甚至有人把它叫做“神奇” 。

PS或者，在一些情况下，有可能通过解决这个删除空白中的HTML代码。 （但是，这不起作用在这种情况下，为什么呢？）

Answer 1:

所述img是在HTML中“替换元件”，并且同样地，是它处理为一个字符。 现在在没有任何样式，该图像与在该行上其他字符的基线对齐。

因此，换句话说，有余地的图像下方的伸。

它更改为一个块删除此功能，因为你注意到了。

Answer 2:

默认情况下，图像与文本的基线对齐。 所以，如果你会把文本旁边的图像时，图像会用的基本对齐x ，但该基线与文本行的底部之间的空间不大（3px的明显）。

你有它：

http://jsfiddle.net/xDCEX/

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

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

当然，它改变为display: block也可以，但是它也有其他的副作用。 如果一切现在的工作，改变vertical-align是最简单的方式。

文章来源: Why is there a pesky little space between and other elements?