如何減少文本的高度？

Question

我的網站正在使用fontawesome。在網站上，圖標（FA-箭頭-H）一個包裝在一個span標籤，基本上是這樣的：

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

我有各種樣式在外部樣式表用於此箭頭設置，包括：懸停過渡。其他的風格包括字體大小41px和箭頭的位置絕對。我還將鼠標指針設置爲「指針」，並且在懸停時將紅色箭頭變爲橙色（使用CSS3樣式：轉換：所有0.5s緩動0）。

編輯：這裏是所有的CSS規則：

#myArrow { 
    display: none; 
    font-size: 41px; 
    position: absolute; 
    z-index: 100; 
    color: red; 
    transition: all 0.5s ease 0s; 
} 

#myArrow:hover { 
    color:orange; 
    cursor:pointer; 
} 

下面是一些jQuery的淡入的箭頭：

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

一個惱人的事情是，懸停效果產生約20像素以上/在文本下方。也就是說，當光標的底部接觸箭頭，或者光標的頂端大約在箭頭下方20px時，就會發生懸停轉換。

我曾嘗試過各種東西，甚至設置樣式爲兩個span和i到

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

和箭頭依然出現上面所描述的相同懸停的問題（我也可以單獨試過這種造型對於兩個標籤）。

我想這個問題也可能是CSS顯示，所以我試圖同時設置span和i到

- block 
- inline 
- inline-block 

沒有成功。

我還設置了兩個標記以使padding：0沒有成功。

請注意，此20像素距離懸停過渡只發生在垂直方向;當水平接近箭頭（從左或右）時，當用戶實際上在圖標上方懸停時發生懸停轉換。

任何人都可以請建議我怎麼會讓當用戶從上方或下方接近該圖標，實際上懸停在圖標fontawesome，而不是當光標20像素遠懸停過渡發生？

Answer 1

雖然不是超級優雅，但我只是更改了#myArrow的高度，並將其溢出設置爲隱藏，然後我使用邊距來定位i元素。

#myArrow { 
 
    font-size: 41px; 
 
    position: absolute; 
 
    z-index: 100; 
 
    color: red; 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
#myArrow:hover { 
 
    color:orange; 
 
    cursor:pointer; 
 
} 
 

 
#myArrow { 
 
    height:20px; 
 
    overflow:hidden; 
 
} 
 

 
#myArrow i { 
 
    margin-top:-10px; 
 
    display:block; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 

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