我有一个 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 转换器,除了在像这样的一些边缘情况下,它大部分都可以工作。我只需要了解这种差异的来源,以便在我的计算中处理它。
最佳答案
问题在于 span
元素是内联元素。对于这些情况,将 span
更改为和 inline-block
显示:
span {
display:inline-block;
}
这里还有一些阅读: css - inline elements ignoring line-height
这是更新后的 fiddle : https://jsfiddle.net/f2bmfkxg/1/
关于css - Div 的高度与 Span 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36091115/