<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>
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; }