line-height 的个人理解

看下面一段HTML，.box 的高度为多少呢？

<style>
    .box{
        line-height: 24px;
        background-color: lightblue;
    }
    .box span{
        line-height: 48px;border: 1px solid;
    }
</style>
<div class="box">
    <span>content ...</span>
</div>

如上面最终显示 .box 容器 height = 48px;span 的height = 21px。不要以为line-height在span元素里不起作用。

MDN 文档中对line-height的描述如下：

line-height CSS 属性用于设置多行元素的空间量, 比如文本。对于块级元素, 它指定元素行盒（line boxes）的最小高度。 对于非替代的inline元素, 它用于计算行盒（line box）的高度。
适用元素 all elements. It also applies to ::first-letter and ::first-line.

将\标签里的内容 改为content ... <br> content ... </span> 后，span 的 height = 48+21（21px 是span中内容区域的高度） = 69px; .box 的height = 96px(48px*2)。

证明line-height在span元素里起作用了, 此时显示的高度与在HMTL5声明下每个行框盒子前面一定附带一个“空白节点”没有关系。因为span元素所在的inline box 的高度已经是48px，与“空白节点”不在同一个内联盒子（此内联盒子的行高是24px，继承父元素的行高）

如果设置 .box 容器的 line-height: 100px;，则 .box 容器的最终高度就是100px;此高度就是由“空白节点”的行高（100px）撑起的

去掉span标签里的内容，.box 的 height = 0;

当span标签里没有内容时，为什么 .box 的高度为0 呢？？ 为什么此时不存在“空白节点”呢？？

张鑫旭老师对 inline box的解释如下：

inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span, a, cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。

行高取决于每个内联盒子的最高的line-height高度

个人理解：span 元素默认的display属性是inline，当里面无内容时，不能形成一个inline block（联想一下属性inline-block。对于本身display属性不是inline-block的元素（如span元素，本身只是一个inline-inline元素），首先需要有内容，才会在span元素外包裹一个inline block。所以此时div里吗没有inline block，也就没有“空白节点的存在”。

ps: content area 的高度可以认为是Firefox/ IE文字选中的背景区域，为什么chrome不是呢？在上面的第二种情况时，chrome下选中第二行的“content …” 的背景区域高度比第一行高，而Firefox和IE则显示相同。