具有不同字體大小文本的內嵌塊元素的垂直維度

我有一系列顯示元素：內聯塊。它們包含不同字體大小的文本，並且彼此相鄰顯示。具有不同字體大小文本的內嵌塊元素的垂直維度

我想了解元素的垂直維度來自哪裏。

下面是簡單的代碼：

<a class="icon"></a> 
<a>H</a> 
<a class="icon"></a> 
<a>H</a> 
<a class="icon"></a>

和CSS：

a { 
    font-family: consolas; 
    display: inline-block; 
    padding: 10px; 
    font-size: 14px; 
} 

.icon:before { 
    content: "H"; 
    font-size: 44px; 
} 

a:not(:empty) { 
    padding: 25px; // (44-14)/2 + 10 
}

現在，相反的是我所期望的，25px的不是填充，以補償字體大小正確的值差異，但27px是。

我不明白爲什麼font-size：44px的文字高度實際上是51px，而14px是17px。

一旦將這些值考慮在內，有道理（51 - 17）/ 2 + 10 = 27是正確的填充補償。

See fiddle here

來源

2014-01-06 Alexander

它有line-height

設置font-size和line-height做，如果你想他們排隊是相同的。

DEMO

來源

2014-01-06 21:09:59 kei

實際上它確實可以處理行高，但是這裏的問題是要明白爲什麼，沒有明確設置行高，這些值與指定的字體大小值不同，以及它們來自哪裏？ – Alexander

因爲默認的'line-height'約爲[font-size]的值的1.1倍左右[這裏] [http://stackoverflow.com/questions/16163788/line-height-default-value-if -font-size-is-100） – kei

回答這個問題，謝謝！ – Alexander

對於內嵌元素，這是一個:before僞元素是默認什麼，高度被以依賴於字體和在瀏覽器上，由CSS 2.1 spec的方式來確定。

如果您在:before僞元素上設置了display: inline-block，則可以使用height屬性設置其高度（如果需要）。

來源

2014-01-06 21:47:30

具有不同字體大小文本的內嵌塊元素的垂直維度

回答

相關問題