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，Chrome和safari上看起来不错。 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就位，一些元素会强加额外的空间