html - 为什么在我的 <a> 元素下会出现 4px 的额外填充？

Question

H3LLO,

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

这是一个link to the example code这说明了我的问题。 a 的 background: 为红色，img 的 border: 为灰色。如您所见，a 元素在 img 下方延伸了大约 4px。

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

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

谢谢
亚当

Answer 1

将 vertical-align:bottom; 添加到您的 img css 属性中。