我的 <a> 元素下怎么会出现 4px 的额外内边距？

Question

H3LLO，

由于某种原因，在 a 元素下出现了 4px 的额外填充。我在 Firefox 和 Chrome 中都看到了这个清单。我记得早期在 Flickr 上看到过这种现象，只是它是一个蓝色的条，出现在 s 下，包裹着元素。

这里是一个示例代码的链接，它说明了我的问题。 a 的背景：已设为红色，img 的边框：已设为灰色。正如您所看到的，a元素在img下方延伸了大约4px。

要查看代码，只需点击将鼠标悬停在窗口上时出现在右上角的“使用 JSBIN 编辑”链接即可。

关于如何摆脱 a 元素的额外底部填充有什么想法吗？

谢谢
亚当

Answer 1

将

vertical-align:bottom;

添加到您的 img css 属性中。

Answer 2

a {display: inline-block}
img {display: block}

图像默认内联渲染，您需要添加

display: block

或

vertical-align: bottom

来解决该问题。

Answer 3

对我来说唯一的工作方法是“删除”边距，即用 div 包裹图像并将 div 的大小设置为与图像完全相同。

<div style="width:64px; height:64px">
  <img src ='image.png' style="width:64px; height:64px" />
</div>

Answer 4

您还可以设置标签“display: flex”：a {display: flex}

Answer 5

我不确定为什么会发生这种情况，但你可以尝试 YUI Reset 来修复它。