html – 一个div的不需要的padding-bottom

前端之家收集整理的这篇文章主要介绍了html – 一个div的不需要的padding-bottom前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@这是我的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包含一些padding-bottom,即使我设置padding:0.

如果我删除DOCTYPE,这个问题不会发生.有没有办法解决这个问题而不去除DOCTYPE?

解决方法

img { display:block; }

要么

img { vertical-align:bottom; }

会工作.由于图像是内联的,文本是内联的,所以用户代理为下降字符(y,q,g)留下一些空间.要取消对图像的这种效果,您可以指定上述任何一种样式,尽管您可能希望使规则更具体,因此您不要定位不希望将其应用于的图像.

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

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

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

猜你在找的HTML相关文章