锚标记生成不需要的高度

Question

我无法将不需要的额外高度添加到锚标记。

这是基本代码

<!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。

Answer 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 等字母的后代，基线下方有一些 space。

要解决此问题，请使用 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>

Answer 2

在主播上尝试font-size: 0;

编辑：没看到问题评论..

锚标记生成不需要的高度

anchor tag generates unwanted height

html

css

anchor