首页 文章

<img>标签下的额外填充？

提问于
浏览 次
22

我的网页上的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元素的一部分 .

html css

5 回答

  • 0

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

    回复于
  • 46

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

    回复于
  • 2

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

    回复于
  • 0

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

    <li><div>Title</div><img src='...' width='60px' height='60px' /></li>
    回复于
  • 1

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

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

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

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

    回复于

相关问题