用无单位数值（如 line-height: 1.6）设置行高最稳妥，因其随 font-size 动态缩放；而固定像素值（如 24px）在响应式或字体变化时易导致行距失控，中文正文推荐 1.75 起步，标题可降至 1.3–1.4。
直接结论：用无单位数值（如 line-height: 1.6）设置行高，是提升可读性最稳妥、最不易翻车的方式；固定像素值（如 line-height: 24px）在响应式或字体变化场景下大概率导致行距失控。
为什么 line-height: 1.6 比 line-height: 24px 更可靠
浏览器计算行高时，line-height 的值类型决定它是否随字号缩放：
-
line-height: 1.6是乘数——它始终按当前元素的font-size动态计算（比如font-size: 14px→ 实际行高 = 22.4px；换成font-size: 18px→ 行高自动变成 28.8px） -
line-height: 24px是绝对长度——无论子元素字号怎么变，它都卡死在 24px，小字时显得松垮，大字时文字可能重叠 - 移动端用
rem做字号响应时，带单位的line-height会彻底失效：根字号缩小时，行高不缩，段落视觉节奏崩坏
中文正文该设多少才不粘连也不割裂
纯中文阅读场景下，line-height 不是越“宽松”越好，而是要匹配中文字体的字怀（glyph bounding box）和视觉呼吸感：
- 小字号正文（
font-size: 14px–16px）推荐从line-height: 1.75起步，实测微调；低于1.5易粘连，高于2.0段落节奏断裂 - 思源黑体、HarmonyOS Sans 等现代无衬线字体自带较大内置行距，设
1.6可能已偏松，需打开开发者工具看真实行框（加border: 1px solid red辅助观察） - 标题（
h1–h3）字号大，可降到1.3–1.4，避免头重脚轻；但别用1.0，否则基线对齐会让文字贴顶
line-height 在 flex/grid 容器里“失效”其实是对齐被覆盖
常见现象：给 p 设了 line-height: 1.8，但放在 display: flex 的父容器里，文字还是贴着顶部。这不是 line-height 失效，而是它的作用域被更高优先级的对齐规则压制：
立即学习“前端免费学习笔记（深入）”；
-
flex容器默认align-items: stretch，若子项是块级元素（如p），它会拉满容器高度，掩盖行高效果 - 若想让单行文字在 flex 容器中垂直居中，应设父容器
align-items: center，而非硬调子元素line-height - 若子项是多行段落，
line-height依然控制每行间距，但整体容器高度由flex的伸缩逻辑决定——此时需检查max-height或flex-shrink是否意外截断
内联元素（span、a）上设 line-height 为什么没反应
因为 line-height 作用对象是「行框（line box）」，不是单个内联元素本身：
- 给
span单独设line-height: 2，不会撑开它自己的高度，只影响它所在那一整行的行框总高 - 真正控制
span相对于行内其他内容的上下位置的是vertical-align（默认baseline） - 若真需要某个图标或链接“抬高一点”，优先用
vertical-align: middle或text-bottom；非要靠line-height，得先加display: inline-block - 表单控件（如
input、button）是替换元素，line-height对它们只影响行框，不改变自身高度——按钮垂直居中请用padding或flex
最容易被忽略的一点：行高过大时，锚点链接的点击热区会变虚——用户点文字边缘可能触发不了点击，尤其在小屏设备上。这不是 bug，是行盒高度拉开了文字与可点击区域的映射关系。调试时别只盯着样式面板，得在真机上点几下验证。
