html - Extra padding under an <img> tag?

Question

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

If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle 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.