本文探讨了HTML中内联元素（如span）设置行高为何有时不生效的问题。实际上，行内元素的line-height属性并非作用于元素自身，而是影响其所在的行框盒子。行框盒子会选择内部元素中行高的最大值作为最终行高。通过多个代码示例，阐述了行高在不同情况下的表现和如何影响元素布局。
最近在看张鑫旭大佬的《css世界》，读到5.2.4 内联元素 line-height 的“大值特性”，产生了疑惑，
在开发中确实也遇到了同样的问题，深入探究后得出结果，先说结论吧，论证内容有点长，结论：
行内元素自身并没有行高这个属性，虽然设置可以设置行高，但是最终作用的地方并不是自身，而是其自身所在的行框盒子上！如果你不知道什么是行框盒子，建议你好好读读张大佬的《css世界》，这里我简单的画一画
如上如所示，我的结论是：
内联盒子没有行高这一属性，给它设置line-height，最终是作用在行框盒子上，而行框盒子最终会取内部行高最高的那个作为最终行高，而此行高将在其内部所有内联盒子中生效！
上代码：
p{
line-height: 96px;
}
span{
line-height: 20px;
}
span标签中的文字
为了让文字换行体现效果，我把浏览器缩窄一些，span标签中的文字放多一点，上述代码页面表现为：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
