为什么字体较小的文字会增加tr高度

Question

我遇到一个奇怪的问题，在this page中有两个不同字体大小的跨度。

第一个范围（内容为“With empty title”）没有明确的字体大小，因此它继承了100％的字体大小，在css检查器中它变为12px。带有“EMPTY”字样的第二个跨度最初是隐藏的，可以通过单击IT标志来查看。它有这个css应用

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

根据检查员的说法，当显示“EMPTY”范围时，其计算尺寸为9px，但是当显示第二个范围时，包含tr的闪烁为1px，在我的浏览器上，tr高度从32px变为33px显示空跨度时的值。

为什么会这样？如何在不更改span.empty font-size？

的情况下防止这种情况发生

Answer 1

Span是一个inline元素，它在流程中表现得像字母或内联框一样。

它位于baseline下方，baseline下方，您的字母间距仍然存在，例如：g，j，p，q，y，....

字母和内联框位于baseline，对于任何内联元素都是defaut vertical-align。将其重置为vertical-align:top或bottom，差距将成为所用区域的一部分。

如果减少行高，基线会减少，而元素太高＆＃39;将会过去。

希望它足够清楚，不要犹豫，编辑这篇文章，把它变成正确的英文，thks（可擦除的行）