为什么文本字体较小，字体大小增加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

回答