div的不需要的填充底部

[英]Unwanted padding-bottom of a div


Here is my html:

这是我的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.

我不知道为什么div包含一些padding-bottom甚至我设置padding:0。

If I remove DOCTYPE, this problem will not occur. Are there any other ways to solve this problem without removing DOCTYPE?

如果我删除DOCTYPE,则不会发生此问题。有没有其他方法可以在不删除DOCTYPE的情况下解决此问题?

3 个解决方案

#1


35  

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.

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

Demo: http://jsbin.com/obuxu

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

Another alternative as another poster has pointed out would be to set line-height to 0 on the parent element.

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

Technical Explanation: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

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

#2


9  

Set the line-height: 0; in the div style:

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

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

The img is an inline element, so it saves room for characters with descenders. Adjusting the line-height in the div eliminates the problem. Optionally, you could also change the img to display as a block element.

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

#3


0  

It's entirely possible that what you think is bottom padding on the div is actually caused by another style rule - for example, padding on the body element, which is possible if you enable/disable browser quirks mode (playing with the DOCTYPE tends to have that effect).

完全有可能你认为div上的底部填充实际上是由另一个样式规则引起的 - 例如,在body元素上填充,如果启用/禁用浏览器怪癖模式,这是可能的(与DOCTYPE一起使用往往具有该功能)影响)。

If that is the case, it should be possible to override the default styling with a custom style rule.

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

Firebug can be a great help here as it shows which CSS styles affect which DOM element.

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/10/05/a829b07783bd4ba27f6073f028c0eee5.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com