Css 如何降低文本的高度？

我的网站正在使用Fontsome。在站点上，其中一个图标（fa-箭头-h）被包装在

span

标签中，基本上如下所示：

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>

下面是一些使箭头淡入淡出的jQuery：

$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);

一件恼人的事情是，悬停效果发生在文本上方/下方约20px处。也就是说，当光标底部接触箭头，或者光标尖端大约在箭头下方20px时，将发生悬停过渡

我尝试了各种方法，甚至将

span

和

I

的样式都设置为

style="line-height:0;height:0"

- block
- inline
- inline-block

箭头仍然出现，与上面描述的悬停问题相同（我还分别尝试了这两个标记的样式）

我认为css显示也可能有问题，所以我尝试将

span

和

I

设置为

style="line-height:0;height:0"

- block
- inline
- inline-block

没有成功

我还将这两个标记都设置为具有填充：0，但没有成功

注意，这个20px距离的悬停转换只在垂直方向发生；当水平（从左或右）接近箭头时，当用户实际将鼠标悬停在图标上时，将发生悬停转换

---

当用户从上方或下方接近此图标并实际将鼠标悬停在图标上方时，而不是光标距离为20px时，有人能建议我如何进行悬停转换吗？

虽然不是非常优雅，我只是简单地更改了

#myArrow

的高度，并将其溢出设置为hidden，然后使用边距将

I

元素放置在其中

#我的箭头{
字体大小：41px；
位置：绝对位置；
z指数：100；
颜色：红色；
过渡：所有0.5秒到0秒；
}
#我的箭头：悬停{
颜色：橙色；
光标：指针；
}
#我的箭头{
高度：20px；
溢出：隐藏；
}
#我的箭头i{
利润上限：-10px；
显示：块；
}

为了更容易地复制问题，您可以发布所有应用于

和

.fa箭头

元素的CSS样式规则吗？您能做一个提琴吗？我想我了解这里发生了什么。设置字体大小并不意味着每种字体都能填充它（

或

，

就是很好的例子）。由于其形状，水平箭头仅填充部分区域，但包含它的字体区域仍为41px。只需添加类似

.fa{背景色：#ddd；}

的内容即可查看整个字体区域。工作完美…对我来说似乎很优雅：）