在< img>下的额外填充标签？ [英] Extra padding under an <img> tag?

问题描述

我在我的网页上的img标签下面有一些填充。 html看起来像：

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>

是的，所以在图像下面有大约5像素的填充（我可以告诉，因为bg颜色父亲项目不同）。我试图分配一个类给img标签，padding / margin / border都设置为零，但没有改变。我想知道如果有什么我缺少img标签，可能会导致这种填充出现？

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?

当我删除img标签，只剩下'title'div，额外的填充已经消失了，

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

感谢

-------------更新------------------ -

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

这只发生在FF，chrome和safari看起来不错。 Firebug还显示填充是img元素的一部分。

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

推荐答案

如果您可以设置图像的 风格到块应该可以解决这个问题。将 vertical-align 设置为底部或 middle 。我认为问题出现了，因为Firefox试图定位内联图像，所以它们的底部边缘与文本的基线对齐，因此在图像下面有文本下划线的空间。

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.

这篇关于在< img>下的额外填充标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！