Menu
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?
603
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
169
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
