无意义的填充底部的div [英] Unwanted padding-bottom of a div
问题描述
这是我的html：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.1 // ENhttp://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。 / p>
如果我删除DOCTYPE，这个问题不会发生。有没有其他方法来解决这个问题，而不删除DOCTYPE？
img {display ：块; }
或
img {vertical-align：bottom; }
可以工作。由于图像是内联且文本是内联的，用户代理为下降字符（y，q，g）留下一些空间。要取消对图片执行此效果，您可以指定上述任何一种样式，但您可能希望使规则更具体，以便您不要定位不想应用此图片的图片。
演示： http://jsbin.com/obuxu p>
作为另一个海报的另一个替代方法是在父元素上将line-height设置为0.
技术说明： https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Here is my 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>
I don't know why the div contains some padding-bottom even I set padding:0.
If I remove DOCTYPE, this problem will not occur. Are there any other ways to solve this problem without removing DOCTYPE?
img { display:block; }
or
img { vertical-align:bottom; }
would work. Since images are inline and text is inline, user agents leave some space for descender characters ( y, q, g ). To un-do this effect for images, you can specify either of the styles above, though you might want to make the rules more specific so you don't target an image you don't want this to apply on.
Demo: http://jsbin.com/obuxu
Another alternative as another poster has pointed out would be to set line-height to 0 on the parent element.
Technical Explanation: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
这篇关于无意义的填充底部的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
