如何計算一個內聯元素

的高度我有一個span元素與下面的CSS：如何計算一個內聯元素

span.test { 
    font-size: 20px; 
    line-height: 1; 
}

爲什麼跨度的計算高度似乎的22px？這兩個額外的像素來自哪裏？

enter image description here

是否有可能使高大的20像素，而無需使用inline-block？

這裏是簡單jsbin我用來測試：http://jsbin.com/tigevecemoco/1/edit

來源

2014-09-25 tyrion

行高做代碼中的任何事情嗎？ – 2014-09-25 14:43:34

似乎不是...... – tyrion 2014-09-25 14:44:12

'line-height：1'似乎像'line-height：100％'一樣，都將line-height設置爲20px（font-size）。我無法辨別額外像素來自哪裏，但我確實看到它們。在Chrome中進行測試。 – GolezTrol 2014-09-25 14:45:18

The CSS 2.1 spec says:

10.6.1串聯，非替換元素

的 '高度' 屬性不適用。內容區域的高度應基於字體，但本規範未指定方式。

事實上，一個非替換內聯元素的高度與其它行內元素的高度相比，對其他任何內容都沒有影響，所以瀏覽器可以自由地報告他們喜歡的任何數字。

但是，一點逆向工程可能是有益的。

如果我們查看Times New Roman的字體指標，我們可以看到EM的大小爲2048，WinAscent爲1825，WinDescent爲443.總和上升和下降除以EM大小乘以字體大小20px）並繞到整數，我們得到22px。

以Arial爲另一種字體，我們的EM大小爲2048，WinAscent爲1854，WinDescent爲434.再次進行計算，我們再次獲得22px。

不同的字體呢？ Tahoma的EM大小爲2048，WinAscent爲2049，WinDescent爲423.再次進行計算，這次我們得到24px。嘿presto，如果你用Tahoma字體嘗試你的JsBin，Firefox確實顯示了24px的高度。

上述字體指標是從將字體加載到Type Light 3.2中獲得的。

不是確鑿的，而是關於它是如何工作的合理建議。

是否可以在不使用內聯塊的情況下使其高度爲20px？

假設上述內容是正確的，您應該能夠通過使用自定義字體並修改該字體的字體指標來適應它。我不想預測這樣做的連鎖反應。

來源

2014-09-25 16:24:45 Alohci

另請參閱[第10.8.1節]（http://www.w3.org/TR/CSS21/visudet.html#line-height），其中討論瞭如何計算線框的高度（或可能）尊重行高，但請注意，無論如何它都參考了第10.6.1節。 – BoltClock 2014-09-26 02:58:34

我無法找到一個答案，爲什麼它被應用。我發現很多論壇上同樣的問題...

但是，作爲一個回答您的要求：

是否有可能使高大的20像素，而無需使用inline-block的？

我設法只通過浮動元素。它似乎失去了它正在填充它...然後，將line-height設置爲特定的20px使它工作。

span.test { 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
    float: left; 
 
}

<span class="test">A</span>

編輯

事實上，加入float的作品，因爲它使inline元素表現得像block元素。

參見：https://developer.mozilla.org/en-US/docs/Web/CSS/float

來源

2014-09-25 15:00:41 LcSalazar

try use "line-height"

'線hieght：1' 從親本遺傳。嘗試自己的行高。

來源

2014-09-25 15:01:08 Syoki

它似乎不適合我。如果我設置'line-height：20px'，它仍然是'22px'高。你能聯繫我你的jsbin嗎？ – tyrion 2014-09-25 15:06:40

MDN line-height

why the span's line-height is useless

希望這有助於。

來源

2014-09-25 15:10:47

雖然這些鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – BoltClock 2014-09-26 02:55:39

我用JS Bin http://jsbin.com/siqabekoloja/1/edit來解決你的問題。我能夠在IE，Chrome和Firefox中保持一致。我相信問題是你需要的元素是塊，而不是內聯元素。

希望這會有所幫助。如果你想讓它們彼此相鄰，只需將它們左右浮動即可。

來源

2014-09-26 02:41:09 David

如何計算一個內聯元素

回答

相關問題