css - Div 的高度与 Span 不同

Question

我有一个 div 的高度与其下方的 span 不匹配的问题:

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 转换器，除了在像这样的一些边缘情况下，它大部分都可以工作。我只需要了解这种差异的来源，以便在我的计算中处理它。

Answer 1

问题在于 span 元素是内联元素。对于这些情况，将 span 更改为和 inline-block 显示:

span {
display:inline-block;
}

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

这是更新后的 fiddle : https://jsfiddle.net/f2bmfkxg/1/