为什么这个DIV填充在顶部？

Question

以下是我的问题的测试用例：

http://game-point.net/misc/testParaPadding/

我希望progressBarGreen.png图像位于DIV内部，而DIV恰好是保持它的正确高度（15px），但DIV顶部有几个像素填充。为什么？浏览器似乎正在调整内容的大小，就像它包含文本一样，因为如果我删除了正文的font-family样式，但填充更改了，但DIV中没有文本。

有趣的是，这个问题在Firefox的怪癖模式中不会发生。

jsFiddle Example

Answer 1

line-height:15px持有图片

需要div

编辑：此行为的解释line-height affecting even no-text blocks

Answer 2

您的图片大小合适，但默认情况下图片是内嵌元素，并且会受到网页line-height，font-size以及内联元素的其他属性的影响。

如果在图像的样式读取display: block;中添加一行，它将成为块级元素，不受任何属性的影响。

Answer 3

vertical-align的{​​{3}}始终是“基线”。 您可以通过向图片添加vertical-align:top来解决此问题;）

Answer 4

使用

position:absolute;

将其他DIV上的图像准确地放在其中。

检查这个小提琴：http://jsfiddle.net/sRhXc/2/