Unwanted padding-bottom of a div

Question

Here is my html:

        
                      

              相关标签:
       
      

Answer 1

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).

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.

Answer 2

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

Answer 3

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

<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.