锚标记上方的额外空间？

Question

这是我的HTML：

<a id="rightArrow">&Rarr;</a>

这是我的CSS：

#rightArrow {
  transition: color .3s ease-in-out;
  font-size: 100px;
  margin: 0;
  padding: 0;
}

#rightArrow:hover {
  color: #01c6ae;
  text-decoration: none;
  cursor: pointer;
}

即使我将填充和边距设置为0，箭头上方仍有很多额外空间，略低于它。如果光标在它上方，我只希望箭头改变颜色，而不是在它上面或下面。任何帮助将不胜感激。

这是一个jsfiddle：http://jsfiddle.net/pnsnh8av/

Answer 1

这是因为↠字符在其上方和下方都有很多空间 例如，您可以使用_获得类似的结果。

到目前为止，我已经提出了三种解决方案：

1。 clip-path

您可以使用clip-path“删除”代码的空白区域，但Firefox和IE目前不支持clip-path形状。

display: inline-block;
-webkit-clip-path: inset(47% 0% 25% 0%);
clip-path: inset(47% 0% 25% 0%);

47% 0% 25% 0%（读取：从顶部删除47％，从底部删除25％）是↠字符中空白的大致区域。
当您决定更改字体大小时，这具有不破坏的优点，但它不适用于所有浏览器（尚未）。 [Fiddle]
（如果相对于行的定位很重要，您应该能够使用position: relative和top或bottom来获得所需的对齐方式。）

2。固定尺寸+ overflow

跨浏览器解决方案是将其设为inline-block，设置为overflow: hidden，并使用line-height和height。我发现这些值非常有效，但它们基本上是随机的：

display: inline-block;
overflow: hidden;
line-height: 20px;
height: 32px;

应该适用于所有浏览器，但如果更改字体大小，则必须再次调整值。 [Fiddle]

3。图像

我原本想建议使用图像而不是文字，但是如果你想让颜色变得动画，那就意识到它不会那么微不足道。
但它实际上仍然非常简单，你只有一个带有背景图像（青色箭头）的外部元素，其中包含一个img标记（黑色箭头），悬停时不透明度从1到0动画。登记/> 这也适用于跨浏览器，并且具有即使在浏览器/不支持该字符的机器上也能正确显示的优点，但当然每次要更改任何内容时都必须创建两个新图像。 [Fiddle]
（在制作中，你可能不应该内嵌图像。）

Answer 2

padding和margin对a元素（默认情况下为内联）产生预期效果，因此您必须将display设置为inline-block 其次，角色本身非常高，所以为了减少元素的高度，保持字体大小，你可以将line-height设置得更少，例如50％：

line-height: 50%;
display: inline-block;

查看小提琴http://jsfiddle.net/pnsnh8av/21/