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.

Answer 2

只需在样式标记中将高度属性添加到图像中，就像需要细线一样，然后需要在外部为safari指定1px。

Answer 3

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 4

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

Answer 5

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