line box 高度取决于内部最高的inline box

by zicai

HTML

<div class="wrapper">
    <span class="span-1">Lorem ipsum 
        <span class="bigger-font-size">dolor<!-- 我的 font-size 比周围元素大，所以由我决定line box 的高度  --></span> sit amet.</span>
</div>

<br>
    
<div class="wrapper">
    <span class="span-2">Lorem ipsum <span class="bigger-line-height">dolor<!-- 我的 line-height 比周围元素大，所以由我决定line box 的高度  --></span> sit amet.</span>
</div>
    
<br>
    
<!-- 上标或下标 也会影响 line box 的高度  -->
<div class="wrapper">
    <span class="span-3">Lorem <sub>ipsum</sub> dolor <sup>sit</sup> amet.</span>
</div>
    
<br>
    
<!-- replaced element 例如：img标签 也会影响line box 的高度 -->
<div class="wrapper">
    <span class="span-3">Lorem ipsum <img src="http://lorempixel.com/30/30" alt="">dolor sit amet.</span>
</div>
<br>

CSS

body{
    /*重置浏览器默认样式，避免测试结果受影响*/
    font-size:20px;
    line-height: 1;
}
.wrapper{
    background-color:#0e51a7;
}
span{
    background-color: #9f6e00;
}
.bigger-font-size{
    font-size:30px;
}
.bigger-line-height{
    line-height:30px;
}
.bigger-font-size,.bigger-line-height,sub,sup{
    background-color:red;
}