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