Unwanted padding-bottom of a div

Question

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?

Interesting question. It made me think about line-height as well as the box model. +1 — Abinadi, Oct 05 '09 at 07:18
It's common in various user agents when the image element is the lone element inside of say, a `div` or a `td`. — meder omuraliev, Oct 05 '09 at 07:18

meder omuraliev · Accepted Answer · 2009-10-05T07:16:45.587

39

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

edited Oct 05 '09 at 07:16

answered Oct 05 '09 at 07:10

meder omuraliev

171,706
64
370
423

If your problem is in IE, this answer seems like the most logical. – Sam152 Oct 05 '09 at 07:22
5

This is *not* specific to IE, it's the natural behavior of many a modern rendering engines including your beloved Gecko. – meder omuraliev Oct 05 '09 at 07:22

Abinadi · Answer 2 · 2009-10-05T07:20:32.553

10

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.

edited Oct 05 '09 at 07:20

answered Oct 05 '09 at 07:13

Abinadi

660
4
9

This helped me when the `div` contained an `iframe` too. – Ryan Sep 20 '19 at 18:32

score 0 · Answer 3 · answered Oct 05 '09 at 07:08

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.

Unwanted padding-bottom of a div

3 Answers3

Linked