推荐使用无单位数字（如line-height: 1.5），它基于当前字体大小计算且继承时按子元素字号重算；避免px/em单位及在内联元素上设置；需注意字体度量、多语言混排和截断风险。
line-height 设置为数字时，是相对于当前字体大小的倍数
直接写 line-height: 1.5 是最推荐的做法。它表示行高 = 当前元素的 font-size × 1.5，且该值会继承给子元素并**按子元素自身的 font-size 重新计算**，语义清晰、响应友好、无意外缩放。
常见错误是写成 line-height: 1.5px 或 line-height: 1.5em：前者强制固定像素值，字号变大时行距不会同步放大；后者在嵌套中会层层相乘（比如父级 line-height: 1.5em + 子级 font-size: 1.2em，实际行高可能变成 1.5 × 1.2 × 基准字号），极易失控。
- ✅ 推荐：
line-height: 1.6（无单位纯数字） - ❌ 避免：
line-height: 24px（固定像素，不随字号缩放） - ❌ 避免：
line-height: 1.5em（em 在 line-height 中有继承放大风险）
内联元素（如 span）上设置 line-height 可能无效
line-height 对非替换的内联元素（例如 <span>）**不产生行框高度效果**——它只作用于生成行框的块级容器或行内块/表格单元格。你给 <span> 单独设 line-height: 3，视觉上几乎没变化。
真正起作用的是包裹它的块级上下文，比如段落 <p> 或 <div>。如果想让某一段文字“看起来”行距更大，必须设在包含它的块级元素上。
立即学习“前端免费学习笔记（深入）”；
- 有效位置：
p、div、h1等块级元素 - 无效位置：
span、a（除非它们被设为display: inline-block或display: block） - 调试技巧：用浏览器开发者工具检查「Computed」面板里的
line-height实际生效节点
line-height 过小导致文字被截断的隐藏问题
当 line-height 小于字体自身的行高需求（比如设成 0.8），文字可能被上一行或下一行的行框裁剪，尤其在使用自定义字体或图标字体时更明显——这不是 bug，而是 CSS 行盒（line box）布局规则决定的。
浏览器根据 line-height 计算行盒高度，并将内容在其中垂直居中；若内容（特别是升部/降部）超出该范围，就会被 clip。中文影响相对小，但英文、数学符号、emoji 或 icon font 容易出问题。
- 安全下限建议：正文至少用
line-height: 1.2，小字号（如 12px）建议 ≥1.3 - 验证方法：在 Chrome DevTools 中勾选「Rendering」→「Paint flashing」，滚动观察是否频繁重绘，可间接提示渲染异常
- 注意：某些字体（如思源黑体 Variable）的
line-gap元数据会影响实际表现，不能只看数值
多语言混排时 line-height 的兼容性陷阱
中英混排、中日韩混排时，不同字体的基线（baseline）、升部（ascent）、降部（descent）差异很大。单纯靠统一 line-height 很难兼顾所有字符，尤其当用了 Web Font 或系统字体栈（如 "Helvetica Neue", "PingFang SC", "Microsoft YaHei"）时。
此时 line-height 数值只是控制行盒高度，但各字体内部度量不一致，会导致同一行里汉字“下沉”、英文字母“上浮”，视觉错位。这不是 CSS 失效，而是字体设计本身的问题。
- 缓解方案：优先用支持多语言的统一线高字体（如 Inter、Noto Sans、HarmonyOS Sans）
- 进阶手段：对关键段落加
font-feature-settings: "tnum";统一数字度量，或用vertical-align: middle微调内联元素 - 真实限制：CSS 目前无法为不同 Unicode 区块指定不同 line-height，只能靠字体选型和容器约束来平衡
line-height 最常被低估的是它和字体度量、继承机制、显示设备像素比之间的耦合关系。调一个数值容易，让它在各种字号、各种语言、各种嵌套深度下都“刚好不碰线又不松散”，需要反复在真机和不同字体下验证。 
