锚标记底部的空白答案

【问题标题】：White space at bottom of anchor tag锚标记底部的空白
【发布时间】：2011-03-12 23:22:53
【问题描述】：

我有一个围绕图像的标签。我在标签所在的 div 上设置了边框。我将边距和填充都设置为 0，但由于某种原因，我的标签仍然比我的图像高 3 个像素。这会在图像和边框之间留下一点空间，这会破坏我想要完成的外观。

我做错了什么？我在 FireFox 和 Chrome 中都进行了测试，结果相同。谢谢

【问题讨论】：

【解决方案1】：

图像是display: inline，因此它被视为一个角色并位于基线上。间隙是由为下降器提供的空间引起的（您可以在 j、g、y 和 p 等字母上找到）。

用 CSS 调整vertical-align：img{vertical-align: bottom}

【讨论】：

【解决方案2】：

display:block 就足够了，如果元素没有兄弟姐妹的话。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我通过添加到“a”标签 display: block; 和 font-size: 0px; 来解决它

【讨论】：

【解决方案4】：

我通过添加修复了我的

a {
 display:inherit
}

希望对你有帮助

【讨论】：

【解决方案5】：

由于多人announced，实现了css:has()选择器。因此，对于“具有”图像作为直接子级的锚点，可以解决此问题：

a:has(> img) {
  font-size: 0;
}

在我写这个回复的时候，它只支持 Safari TP 但可能this table 很快就会更环保。

【讨论】：