CODEWITHSUNDEEP
htmlcss
Alan
Alan

Reputation: 3058

Unwanted padding-bottom of a div

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?

Upvotes: 22

Views: 14092

Answers (4)

Islam Murtazaev
Islam Murtazaev

Reputation: 1778

In my case, it was caused by overflow-x: scroll;

Upvotes: 0

Abinadi
Abinadi

Reputation: 680

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.

Upvotes: 11

meder omuraliev
meder omuraliev

Reputation: 186582

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

Upvotes: 45

levik
levik

Reputation: 117539

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.

Upvotes: 0

Related Questions