文本行的確切高度（字體大小+行高）

Question

如何從高度角度精確控制文本行？

我的意思是，字體大小和行高似乎不是範圍（或其他內聯元素）的確切高度。

看看這個：http://jsfiddle.net/ghxgouba/

HTML：

<div> 
    <img src="http://lorempixel.com/100/50" /> 
    <span>salut</span> 
</div> 

CSS：

span { 
    font-size: 50px; 
    line-height: 50px; 
    background: darkblue; 
    color: #fff; 
    font-family: Arial; 
} 
img { 
    vertical-align: top; 
} 

的跨度是56px的高度，它應該正好50像素，不該」 T'

謝謝。

Answer 1

行高僅適用於塊級元素，這意味着您需要將display: block;或display: inline-block;應用到您的範圍以使line-height正常工作。希望這可以幫助。

http://jsfiddle.net/ghxgouba/3/

span { 
    font-size: 50px; 
    line-height: 50px; 
    background: darkblue; 
    color: #fff; 
    font-family: Arial; 
    display: inline-block; 
} 
img { 
    vertical-align: top; 
} 
#ret { 
    margin-top: 30px; 
} 

Answer 2

添加display:inline-block爲span元素，那麼你會得到完全一樣的高度圖像。 http://jsfiddle.net/ghxgouba/1/

（對於一個正常的內聯元素的基礎上，字體大小和行高的高度計算只是工作不同如需更多信息，請參閱規格：http://www.w3.org/TR/CSS21/visudet.html#line-height）