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

【问题标题】：How come there is 4px of extra padding appearing under my <a> element?为什么我的 <a> 元素下会出现 4px 的额外填充？
【发布时间】：2023-03-27 20:10:01
【问题描述】：

H3LLO，

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

这是一个link to the example code，它说明了我的问题。 a 的背景：被涂成红色，img 的边框：被涂成灰色。如您所见，a 元素在 img 下方约 4px 处延伸。

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

关于如何摆脱 a 元素的额外底部填充的任何想法？

谢谢
亚当

【问题讨论】：

标签： html css image hyperlink padding

【解决方案1】：

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

【讨论】：

是的。图片与文本不在同一基线上。
感谢@pixeline。有效。 @Rob 所以默认情况下图像总是悬停在基线上？
@pylonicon 基线是所有元素的默认基线

【解决方案2】：

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

【讨论】：

在所有 CSS 文件的开头包含 YUI 重置是最佳做法吗？
我认为最好在链接自己的 CSS 文件之前单独链接 YUI 重置

【解决方案3】：

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

图片默认是内联渲染的，你需要添加display: block或者vertical-align: bottom来解决这个问题。

【讨论】：