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

那我怎么去除不需要的高度？如您所见，我已尝试将显示从内联修改为内联块。

enter image description here

Answer 1

以下说明问题的实际内容：

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

Answer 2

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

编辑：没有看到问题评论。

锚标记生成不需要的高度

2 个答案: