Extra padding under an <img> tag?

Question

Hi,

I'm getting some sort of padding below an img tag in my webpage. The html looks like:

<li>
  <div>Title</div>
  <img src='...' width='60px' height='60px' />
</li>

Yeah so there is about 5 pixels of padding beneath the image (I can tell because the bg color of the parent li item is different). I tried assigning a class to the img tag with padding/margin/border all set to zero, but no change. I'm wondering if there's anything I'm missing about img tags that could be causing this padding to appear?

When I remove the img tag, and just leave the 'title' div, the extra padding is gone,

Thanks

------------- Update -------------------

This is only happening on FF, chrome and safari look ok. Firebug also shows the padding is part of the img element.

Answer 1

What if you force the padding margin and border to 0 on img elements? Are you working with Firebug?

Answer 2

I think you might be seeing the space after your image before the end of the list item. Try getting rid of the whitespace in your html, like this:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li>

Answer 3

You could provide a link or more code to allow a better resolution of your problem, but:

1. Verify if your image is 60px by 60px as setup in your img tag

2. Remove padding and margin and border from your img, you may have a default setting for img tag that causes what you're refereeing

3. The extra space under your img may come from other elements in your page, meaning that with the img in place, some element forces that extra space

Answer 4

If you can set the image's display style to block (explicitly, or by floating the image) that should solve the problem. Setting vertical-align to bottom should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders.