Div 高度与跨度不同答案

【问题标题】：Div Different Height Than SpanDiv 高度与跨度不同
【发布时间】：2016-03-19 02:06:59
【问题描述】：

我有一个 div 的高度与它下面的跨度不匹配的问题：

https://jsfiddle.net/daneren2005/f2bmfkxg/:

<div class="outerDiv" style="line-height: 1.33">
    <div class="innerDiv" style="font-size: 68.57px; font-family: libre baskerville;">
        <span>Large Text</span>
    </div>
</div>

innerDiv 的高度是 91，这是正确的 (68.56 x 1.33 = 91.19)。跨度的高度是 86。我不知道高度是从哪里来的。我有一个 HTML -> SVG 转换器，除了像这样的一些边缘情况外，它大部分都可以工作。我只需要了解这种差异的来源，以便在我的计算中处理它。

【问题讨论】：

标签： css

【解决方案1】：

问题在于span 元素是一个内联元素。对于这些实例，将 span 更改为和 inline-block 显示：

span {
display:inline-block;
}

这里还有一些阅读： css - inline elements ignoring line-height

这是更新后的小提琴： https://jsfiddle.net/f2bmfkxg/1/

【讨论】：

好吧，那么 86 的高度是从哪里来的呢？它似乎与输入的字体大小无关。
字体仍然具有固有的行高（前导）。如果您查看网络检查器中的边界框，您可以看到文本上方的空间，它在下降线下方结束（在您的情况下，g 为大）。如果字体没有将此作为字体规范的一部分，则行将一起运行。将字体更改为Arial 看看我的意思。

【解决方案2】：

如果您将 div 的 line-height 更改为 1，您会发现它不会影响 span 的高度。

这是因为像 span 这样的内联元素只占用所需的空间来呈现它们。

【讨论】：