HTML文本行高设置技巧全解析
line-height 表面简单，实则暗藏玄机：推荐始终使用无单位数值（如1.5），因为它基于元素自身字号、继承安全且响应式友好；而 px 或 em 值极易引发嵌套行距塌陷或爆炸、内联元素失效、vertical-align 对齐失准，以及移动端字体缩放异常等连锁问题；尤其要注意 line-height 作用于行框而非内联元素本身，真正控制垂直布局时，flex 替代传统行框机制往往更可靠——一行代码的改动，可能牵动跨浏览器、跨设备、跨字号的渲染全局。
line-height 属性值怎么选才不踩坑
直接说结论：line-height 推荐用无单位数值（比如 1.5），别用 px 或 em——否则子元素继承时会出人意料的行距塌陷或爆炸。
常见错误现象：父容器设了 line-height: 20px，里面套个 字号变大后，文字紧贴上下边，甚至被截断；或者用 line-height: 1.2em，结果每层嵌套都叠加计算，越深越稀疏。
1.5是相对当前元素自身font-size的倍数，继承安全，响应式友好1.5em看似一样，实则基于父元素的font-size计算，嵌套后容易失真20px是绝对值，子元素换字号后行高不会自适应，极易错位
内联元素（如 span、a）行高为啥经常不生效
line-height 对纯内联元素本身不产生“高度”，它只作用于其生成的行框（line box）——换句话说，它影响的是文字所在那条“假想横线”的间距，不是给 自己撑开盒子。
使用场景：你想让一行文字垂直居中在固定高的容器里？光靠 当父容器有 原因在于： 某些安卓 WebView 或旧版 iOS Safari 在缩放字体（比如用户调大系统字号）时，span 上设 line-height 没用；得设在块级容器（如 或 span 变成 display: inline-block 再配合 vertical-align。
单独设 line-height，浏览器会照算，但你几乎看不到变化span 所在的“行框”由其父块级元素的 line-height 决定padding 或 margin 更直接line-height 和 vertical-align 一起用时的典型冲突
line-height，子元素又设了 vertical-align: middle（尤其是图片或 inline-block 元素），很容易出现“看起来没对齐”或“上下空隙忽大忽小”。vertical-align 对齐的是行框内的基线（baseline），而 line-height 决定了行框高度——两者共同决定元素在行内的垂直位置，但基线位置本身受字体、字号甚至 Unicode 字符影响。vertical-align: top 或 vertical-align: bottom，比 middle 更可控display: flex，彻底绕开行框机制移动端适配中 line-height 的隐性风险
line-height 为无单位数值仍可能表现异常——文字挤在一起，尤其在