1

这是我的问题的测试用例：

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

我希望progressBarGreen.png图像位于 DIV 内，并且 DIV 的高度（15px）正好可以容纳它，但是在 DIV 的顶部有几个像素填充。为什么？浏览器似乎正在调整内容的大小，就好像它包含文本一样，因为如果我删除font-family正文的样式，填充会发生变化，但 DIV 中没有文本。

有趣的是，这个问题不会在 Firefox 的 quirks 模式下发生。

jsFiddle 示例

4

4 回答 4

3

你需要line-height:15px在div拿着图像

编辑：解释这种行为line-height 甚至影响无文本块

于 2013-04-05T08:52:50.163 回答
2

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

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

于 2013-04-05T08:54:29.953 回答
2

的初始值始终vertical-align是“基线”。您可以通过vertical-align:top在图像中添加 a 来解决此问题；）

于 2013-04-05T08:55:05.370 回答
0

采用

position:absolute;

将另一个 DIV 上的图像完全放在其中。

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

于 2013-04-05T09:04:06.590 回答