锚标记生成不需要的高度

时间:2015-01-17 12:36:15

标签: html css anchor

我在锚标记中添加了不需要的额外高度时遇到了问题。

这是基本代码

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

enter image description here

2 个答案:

答案 0 :(得分:4)

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

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

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

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