用无单位数值（如line-height: 1.6）设置行高是唯一兼顾可读性、响应式和继承稳定性的做法；带单位写法在字体变化或嵌套时易失控，因line-height: 1.6为乘数可随字号缩放，而24px等绝对值无法自适应。
直接结论：用无单位数值（如 line-height: 1.6）设置行高，是唯一兼顾可读性、响应式和继承稳定性的做法；所有带单位的写法（px、em、%）在字体变化或嵌套时都可能失控。
为什么 line-height: 1.6 比 line-height: 24px 更可靠
浏览器计算行高时，值类型决定它是否随字号缩放：
• line-height: 1.6 是乘数——子元素无论 font-size 是 14px 还是 18px，行高都自动按比例算出（22.4px / 28.8px）
• line-height: 24px 是绝对长度——父设了 24px，子元素即使字号放大到 20px，行高仍卡死在 24px，极易重叠
• 移动端用 rem 做响应时，带单位的 line-height 完全不缩放，段落节奏瞬间崩坏
中文正文该设多少才不粘连也不割裂
纯中文阅读场景下，line-height 不是越大越好，而是要匹配中文字体的字怀和视觉呼吸感：
• 小字号正文（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 的父容器里，文字还是贴着顶部。这不是失效，而是对齐规则优先级更高：
• flex 容器默认 align-items: stretch，块级子项会被拉满高度，掩盖了 line-height 的垂直空间分配
• 想让单行文字垂直居中，应设父容器 align-items: center，而非硬调子元素 line-height
• 若子项是多行段落，line-height 依然控制每行间距，但整体容器高度由 flex-shrink 或 max-height 决定——此时要检查是否被意外截断
内联元素（span、a）上设 line-height 为什么没反应
line-height 作用对象是「行框（line box）」，不是单个内联元素本身：
• 给 span 单独设 line-height: 2，不会撑开它自己的高度，只影响它所在那一整行的行框总高
• 想让某个 span 看起来“更高”，得配合 vertical-align: top 才能显出差异
• 更直接的办法：把它变成 display: inline-block，此时 line-height 会参与自身高度计算
• 注意：line-height 不影响块级元素的 height，除非内容只有一行且无 padding/border
真正难调的不是数值本身，而是它和 font-size 共同生成的行框高度——这个高度会悄悄影响 vertical-align、换行位置、父容器尺寸，甚至触控区域。比如 line-height: 1.2 + font-size: 14px 实际只有 16.8px 高，远低于移动端要求的 44px 最小触控高度，这点最容易被忽略。
