无单位 line-height（如 1.6）是实现真正流式文字布局的唯一可靠路径，因其基于当前 font-size 动态计算且继承时仍按子元素字号重算，而带单位值（如 24px）会破坏响应式节奏与行盒一致性。
用无单位数值（如 line-height: 1.6）配合相对单位的 font-size（如 rem 或 em），是实现真正流式文字布局的唯一可靠路径；写死 px 行高或混用不同单位会直接破坏响应式节奏。
为什么 line-height: 1.6 比 line-height: 24px 更适合流式布局
浏览器对 line-height 的计算逻辑决定了它是否能随字号“流动”：1.6 是乘数，始终基于当前元素的 font-size 动态算出实际像素值；而 24px 是绝对长度，一旦父容器字号缩放（比如根元素 font-size 从 16px 变为 14px），行高却卡死在 24px，小字时行距松垮、大字时文字可能重叠。
更关键的是继承行为：line-height: 1.6 传给子元素时，子元素用自己的 font-size 再乘一次 1.6；但 line-height: 24px 继承过去就是 24px，完全脱离子元素字号——这在嵌套文本（如 <strong> 或 <span>）中极易导致行盒（line box）高度不一致，视觉断层。
- 移动端用
rem做响应式字号时，带单位的line-height会彻底失效 -
line-height: normal不推荐：它依赖字体和 UA，默认值在 1.0–1.2 之间浮动，跨字体/浏览器表现不可控 - 百分比写法（如
150%）虽也相对，但继承时可能触发意外计算，不如无单位数值干净
font-size 用 rem 时，line-height 必须同步设为无单位值
如果根元素设了 font-size: 100%（即浏览器默认 16px），再用 rem 控制各级字号，line-height 就必须用无单位数值，否则流式就断了。例如：
立即学习“前端免费学习笔记（深入）”；
html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: 2rem; } /* 实际行高 = 2rem × 1.6 = 3.2rem */
p { font-size: 0.875rem; } /* 实际行高 = 0.875rem × 1.6 = 1.4rem */这样，无论用户缩放页面、系统启用更大字体、还是你通过 JS 动态调整根字号，所有文本的行高比例都保持一致。
- 不要在
body上写line-height: 24px，哪怕它看起来“刚刚好” - 避免在子元素上覆盖
line-height为带单位值，除非你明确需要局部锁定（如按钮内单行居中） - 中文正文建议起步值
line-height: 1.75，小字号（0.75rem）可微调到 1.8；标题可压到 1.2–1.4
内联元素变大时文字溢出行框？根源在父级 line-height 没兜住
常见现象：<p><span class="highlight">重点词</span>其余正文...</p> 中，.highlight 设了 font-size: 1.2em，结果重点词顶破上一行或下沉挤占下一行——这不是 vertical-align 的问题，而是父 <p> 的 line-height 不够包容最大字号。
解决方式不是给 span 单独加 line-height，而是确保整行行盒高度足够：
- 父容器（如
p）设置足够大的无单位line-height，比如1.6而非1.2 - 若需强调效果，优先用
vertical-align: middle或text-top微调内联元素基线，而非拉伸行高 - 慎用
line-height实现垂直居中：仅适用于单行文本；多行请用display: flex; align-items: center
流式文字布局的复杂点不在怎么写，而在“所有地方都要一致”——只要某一层用了 px 行高，或某个组件忘了继承无单位值，整个流就卡住了。最容易被忽略的是内联元素和响应式断点切换时的行高继承链。
