锚标签生成不需要的高度答案

【问题标题】：anchor tag generates unwanted height锚标签生成不需要的高度
【发布时间】：2018-07-13 09:54:02
【问题描述】：

我遇到了添加到锚标记的多余高度的问题。

这是基本代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<a style="display: inline-block; padding:0; margin:0;">
  <span style="display:inline-block; width:25px; height:25px; background-color: red; padding:0; margin:0;"></span>
  </a>
</body>
</html>

你可以在这里测试 - http://jsbin.com/cewuza/2/edit

那么如何去除不需要的高度？如您所见，我已经尝试将显示从 inline 修改为 inline-block。

【问题讨论】：

字体大小：0；在锚点上解决了这个问题..但这是最佳做法吗？
额外的高度是多少？您的 jsbin 显示一个 25 × 25 px 的红色框。那么问题是什么？你的屏幕截图是关于不同的东西。请发布实际重现问题的代码并准确说明问题所在。
检查锚标记..而不是显示 29px 的跨度本身
cl.ly/image/1Z0q2L2i1z2D
添加vertical-align: top到'a'标签，你应该很高兴；额外的空间来自使用 display: inline-block

标签： html css anchor

【解决方案1】：

以下说明了问题的实质：

<a style="display: inline-block; outline: solid blue;">
  <span style="display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>

span 元素位于文本基线上，因为内联块的行为类似于一个大（或可能是小）文本字符。基线下方有一些空间，用于 j、g 和 q 等字母的下行。

要解决此问题，请使用vertical-align 属性使内联块与其父元素的底部对齐：

<a style="display: inline-block; outline: solid blue;">
  <span style="vertical-align: bottom; display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>

【讨论】：

【解决方案2】：

在锚点上尝试font-size: 0;

编辑：没有看到问题 cmets..

【讨论】：

看起来您所指的comment 想知道“但这是最佳做法吗？”