为啥我的 <a> 元素下会出现 4px 的额外填充?

Posted

技术标签:

【中文标题】为啥我的 <a> 元素下会出现 4px 的额外填充?【英文标题】:How come there is 4px of extra padding appearing under my <a> element?为什么我的 <a> 元素下会出现 4px 的额外填充? 【发布时间】:2011-03-25 08:26:37 【问题描述】:

H3LLO,

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

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

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

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

谢谢 亚当

【问题讨论】:

【参考方案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来解决这个问题。

【讨论】:

以上是关于为啥我的 <a> 元素下会出现 4px 的额外填充?的主要内容,如果未能解决你的问题,请参考以下文章

兼容性—IE6/7下当li里面的元素都浮动,li之间会产生4px的缝隙

为啥 memset 在这种情况下会失败?

行内块元素出现间隙的问题

为啥 Chrome Dev-tools 的 Resources -> Cookies 下会有多组 cookie?

为啥我的 <legend> 元素不能内联显示?

我想要打开一个新的页面,使用window.open在chrome下会出现问题。