如果父级的字体大小很大，如何摆脱跨度上的空间？

Question

我遇到父DOM元素具有相当大的em值的情况。问题是，即使字体大小要小得多，所有内联子元素都会高于它们：

来源（http://jsfiddle.net/rapik/w87m7/2/）：

<div style="font-size: 100px; border: 1px solid red;">
    <span style="font-size: 0.1em;">How to get rid of the space above without changing the font-size or display properties?</span>
</div>

如何在不改变字体大小的情况下摆脱这种差距？我也不想将元素的显示类型更改为“阻止”。

我尝试过改变行高，但没有成功。

P上。 S.如果你想知道，为什么我需要这个：Chrome有一个“功能”，可以防止任何时候字体大小小于6像素。所以我将所有值乘以10得到了这个问题。相应问题：Problems using em units in Chrome

Answer 1

尝试添加vertical-align:top，否则子元素将与基线对齐。

Answer 2

我假设div上的字体大小导致相应的行高;因此'差距'。

因此，将行高设置为您计划在跨度中使用的实际字体大小，将与已提及的vertical-align组合删除它：

<div style="font-size: 100px; border: 1px solid red; line-height: 0.1em;">
<span style="font-size: 0.1em;vertical-align:top">How to get rid of the space above     without changing the font-size or display properties?</span>
</div>

Answer 3

已添加的height和vertical align应该为您处理。

<div style="height: 25px;font-size: 100px; border: 1px solid red;">
<span style="font-size: 0.1em;vertical-align:top;">How to get rid of the space above without changing the font-size or display properties?</span>
</div>