为什么会出现内联元素高度大于line-height？

Question

请看代码

.back{
    margin:100px 0px;
    width:50vw;
    line-height: 100px;
    font-size: 100px;
    border:3px solid tomato;
}
.inlineBack{
    background:rgba(40, 7, 158, 0.2);
}
.back::first-line{
    background:rgba(102,205,170,0.7);
    color:black;
}


    <div class="back">
        xfXg<span class = 'inlineBack'>xfgXxfgXxfgXxfgXxfgXxfTgX</span>
    </div>

实际运行：

可以通过背景色看出来，外层Div的高度确实是由line-box撑起来的，结果也是正确的100px;但是span元素和前面文字节点的高度就变成了140px;
他的高度应该有inline-box组成的line-box决定啊，请问为什么高度不是100px？

Answer 1

display: inline

内联元素，不具有高度和宽度，其所占空间由内容决定。

line-height:100px

行高，对内联元素来说，有效，但是不能决定他的高度，他的高度还是由内容决定：

font-size: 100px;

不同浏览器和不同字体下，文字所占有的高度不同，但是不影响文字的布局：

<style>
.back{
    margin:100px 0px;
    width:50vw;
    line-height: 100px;
    font-size: 100px;
    border:3px solid tomato;
}
.inlineBack{
    background:rgba(40, 7, 158, 0.2);
}
.back::first-line{
    background:rgba(102,205,170,0.7);
    color:black;
}
</style>


<div class="back">
    xfXg<span class = 'inlineBack'>xfgXxfgXxfgXxfgXxfgXxfTgX</span>
    xfXg<span class = 'inlineBack'>xfgXxfgXxfgXxfgXxfgXxfTgX</span>
</div>

显而易见，文字串行了。