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?
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.
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,%5FTables,%5Fand%5FMysterious%5FGaps
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.