额外填充下 <img> 标签？

Question

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

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

是的，因此在图像下面有大约5个像素的填充（我可以说，因为父项目的bg颜色不同）。 我尝试将一个类分配给img标签，其中padding / margin / border都设置为零，但没有变化。 我想知道是否有任何关于img标签的遗漏可能导致这种填充出现？

当我删除img标签，然后离开'title'div时，额外的填充消失了，

谢谢

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

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

Answer 1

如果您可以将图像的display样式设置为block解决问题的方式。 将vertical-align设置为bottom或middle也应该有效。 我认为问题出现是因为Firefox试图定位内嵌图像，因此它们的下边缘与文本的基线对齐，因此图像下方有文本下限的空间。

Answer 2

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

Answer 3

我想你可能会在列表项结束之前看到图像后面的空格。 尝试摆脱html中的空白，如下所示：

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

Answer 4

如果你在img元素上强制填充边距和边框为0怎么办？ 你在使用Firebug吗？

Answer 5

您可以提供一个或多个代码以便更好地解决问题，但是：

1.验证您的图像是否为imp标记中的60px x 60px设置

2.从你的img中删除填充和边距以及边框，你可能有一个img标签的默认设置会导致你的裁判

3.你的img下面的额外空间可能来自你页面中的其他元素，这意味着在img到位的情况下，一些元素会强加额外的空间