Question

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<div style="border:1px solid red; float:left; padding:0;">
    <img src="xxx.jpg">
</div>

我不知道为什么div包含一些填充底部，即使我设置填充：0。

如果我删除DOCTYPE，则不会出现此问题。如果不删除DOCTYPE，还有其他方法可以解决这个问题吗？

Answer 1

img { display:block; }

或

img { vertical-align:bottom; }

会奏效。由于图像是内联的，文本是内联的，因此用户代理会为下行字符（y，q，g）留出一些空间。要为图像取消此效果，您可以指定上述任一样式，但您可能希望使规则更具体，这样您就不会定位不希望应用此图像的图像。

演示：http://jsbin.com/obuxu

另一个海报指出的另一个选择是在父元素上将line-height设置为0。

技术说明：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Answer 2

设置行高：0;在div风格：

<div style="border:1px solid red; float:left; padding:0; line-height:0;">
<img src="xxx.jpg" />
</div>

img是一个内联元素，因此可以为下划线的角色节省空间。调整div中的行高消除了这个问题。或者，您也可以更改img以显示为块元素。

Answer 3

您认为div上的底部填充完全可能是由另一个样式规则引起的 - 例如，body元素上的填充，如果您启用/禁用浏览器，这是可能的怪癖模式（玩DOCTYPE往往会产生这种效果）。

如果是这种情况，应该可以使用自定义样式规则覆盖默认样式。

Firebug在这里可以提供很大的帮助，因为它显示哪些CSS样式会影响哪个DOM元素。

div的不需要的填充底部

3 个答案: