Image within a div has a gap on the bottom

[markwm]

I have this very simple code:

<style type="text/css">
#mydiv {
background-color: red;
}
</style>

<div id="mydiv"><img src="images/ad.jpg" width="150" height="180"></div>

For some reason in Safari, Opera and Firefox I can see 3px of red below the image, yet in IE 6/Win there is none.

Adding a margin-bottom: 0px to the image doesn't fix it. Why exactly does their appear to be a 3px margin underneath my image?

[DanA]

Without seeing your entire HTML and CSS, it's quite hard to help you

[Ingolemo]

I suspect this is caused by the fact that images aren't block elements; they're inline. The 3 or so pixels at the bottom are the bits below the baseline where text descenders would usually go (the tails on letters like g).

If that is indeed the problem, then you should be able to fix it by setting

display:block;

on the img.

[Setek]

I suspect this is caused by the fact that images aren't block elements; they're inline. The 3 or so pixels at the bottom are the bits below the baseline where text descenders would usually go (the tails on letters like g).

If that is indeed the problem, then you should be able to fix it by setting display:block; on the img.

Yes, and this I believe only happens with a correct and full doctype - without it, images by default are vertically aligned at bottom.

If adding

display: block;

to every image is not suitable, you could also add

vertical-align: bottom;

to the images, which I believe is a less intrusive solution.