IE7 Padding Bottom Problem

I’m running into a crazy problem with IE7 where I have a div layer with an image at the bottom but the div layer has a padding problem where I have about 2-4 pixels going past the image.

I’ve tried adding padding:0px and margin:0px and still nothing works here.

Any ideas on this?

Images are inline elements like text and are placed on the baseline and not the bottom to leave room underneath for descenders.

Setting the image to display:block cures the problem. If you need the image as an inline element then setting vertical-align:top (or bottom) usually works also.

There are also whitespace bugs with inline elements and that often gets interpreted as space also so make sure white space following an image and the closing parent tag is avoided.

okay I figured it out. If I put the containing div tag id and then the img selector to display:block then it works just fine.