爲什麼文本字體較小，字體大小增加tr高度

我遇到了一個奇怪的問題，this page中有兩個字體大小不同的字體。爲什麼文本字體較小，字體大小增加tr高度

Screenshot

第一跨度（具有內容「隨着空標題」）沒有明確的字體大小從而它繼承100％的字體大小，在CSS檢查變得12像素。第二個帶有「EMPTY」字樣的跨度最初是隱藏的，可以通過點擊IT標誌查看。它這個CSS施加

td { 
    .empty { 
    color: #bbb; 
    font-size: 0.8em; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    } 
}

根據檢查器中，當「空」被示出跨度其計算大小爲9px，然而，當顯示所述第二跨度存在用於包含TR 1px的閃爍，在我的瀏覽器TR當顯示空跨度時，高度從32px改變爲33px，值越高。

這是怎麼發生的？如何防止不改變span.empty字體大小？

2014-06-14 Fabio

申請'的line-height：0.8em;'的'' – Banana

@香蕉，即使它可以減少整個tr高度，我想避免這種情況。 – Fabio

您的跨度是內聯框，與字母一樣多。它站在基線上，並保持在平均值0.2em之下，因爲任何字母或內聯塊都可以通過默認:)。它增加了跨度所需的高度。所以垂直對齊的頂部或底部可以擦除該間隙。所以是行高作爲香蕉建議 –

跨度是一個inline元素，並且像字母或內聯框那樣表現在流中。

它矗立在baseline，該baseline下，你有仍然是字母如間隙：G，J，P，Q，Y，....

信件和內嵌盒站在baseline對於任何內聯元素，這是默認的vertical-align。將其重置爲vertical-align:top或bottom，間隙將成爲所用區域的一部分。

如果您減少行高，基線會減少，元素「太高」會超過它。

希望這是很清楚，請不要猶豫，編輯這篇文章把它變成正確的英語，THKS（可擦除線）

2014-06-14 14:09:59

回答