除了跨度不同的高度

Question

我遇到的问题是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 - ＆gt;除了像这样的边缘情况之外，SVG转换器主要工作。我只需要了解这种差异的来源，以便我可以在计算中处理它。

Answer 1

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

span {
display:inline-block;
}

这里有更多阅读： css - inline elements ignoring line-height

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

Answer 2

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

这是因为像span这样的内联元素只占用了所需的空间量。