[CSS] The padding style applying to <img> in IE7 is separate from FF3?

Question

Hi folks:

I got a image like below with padding-right: 15px

<td><img style="padding:0px 15px 0px 0px;..." />
<td><td>another image<td/>

But the effect shows on IE and FF is a bit different. Is the way to measure is separate?

Thanks.

Answer 1

Because your HTML is absolutely invalid and horrible. Change it to:

<td><img style="padding: 0px 15px 0px 0px;" /></td>
<td>another image</td>

Answer 2

It’s hard to tell without seeing your full HTML / CSS, but perhaps this is a line-height issue?

Images are inline elements by default, which means they get a line-height applied to them. This might cause extra ‘margin’ at the bottom.

Try applying display: block; to the img element, like so:

<td><img style="padding: 0 15px 0; display: block;" alt="" /></td>
<td>Another image</td>