最近在看张鑫旭大佬的《css世界》，读到5.2.4  内联元素 line-height 的“大值特性” ，产生了疑惑，

在开发中确实也遇到了同样的问题，深入探究后得出结果，先说结论吧，论证内容有点长，结论：

　　行内元素自身并没有行高这个属性，虽然设置可以设置行高，但是最终作用的地方并不是自身，而是其自身所在的行框盒子上！如果你不知道什么是行框盒子，建议你好好读读张大佬的《css世界》，这里我简单的画一画

 

 

 如上如所示，我的结论是：

　　内联盒子没有行高这一属性，给它设置line-height，最终是作用在行框盒子上，而行框盒子最终会取内部行高最高的那个作为最终行高，而此行高将在其内部所有内联盒子中生效！

上代码：

复制代码
<style>        p{            line-height: 96px;       }        span{            line-height: 20px;       }</style><!--------分割线----------><p>        <span>span标签中的文字</span></p>
复制代码

为了让文字换行体现效果，我把浏览器缩窄一些，span标签中的文字放多一点，上述代码页面表现为：

 

 

 如上图，span的line-height属性确实设置上了，并且覆盖了继承的来自父元素p的line-height:96px;但是从换行来看，span的表现，依然是line-height:96px; !!

张大佬的书中只解释了父盒子的高度问题，简单回顾下：因为幽灵空白节点继承了父元素p的行高，所以撑起了p元素的高，所以整个的高度为96px。按照张大佬的解释理解，

span的行高应该是24px，幽灵空白节点的行高为96px，行高撑起了高度，所以父元素的高度为最高的高度。

但是，这里通过换行我们可以发现span表现的并不是20px,而是96px ！而且通过调试器我们发现，上下调整span的line-height页面根本一点变化都没有，纹丝不动！

这时候小白就要说话了，行内元素的行高设置无效！聪明的你试一下就会发现，行内元素当然是可以设置行高属性的。那这里为什么会设置无效呢？其实当你设置span的行高超过父元素的时候，你就会发现，有意思的现象出现了！

没错，span的行高生效了！

 

 

 那么问题来了，说不生效吧，比父元素行高大的时候它生效了，说生效吧，小于父元素行高的时候多少都没用，什么情况?问题不急着回答，再看下面一个例子：

复制代码
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <