17370845950

无单位数值（如1.5）设置line-height最安全，它基于当前font-size动态计算，避免继承失真；带单位值（px/em）易导致行高失控或无法响应。

line-height 设为无单位数值更安全

用无单位数字（如 1.5）设置 line-height 是最稳妥的做法。它会基于当前元素的 font-size 动态计算行高，避免继承时出现意外放大或缩小。

常见错误是写成带单位的值，比如 line-height: 24px 或 line-height: 1.5em：前者在子元素字号变化时行高被“锁死”，后者会层层叠加（em 相对于父元素字号，嵌套深了容易失控）。

• ✅ 推荐：line-height: 1.5 —

  

  — 子元素改 font-size，行高自动等比缩放
• ❌ 避免：line-height: 1.5em —— 若父元素 font-size: 16px，子元素设为 20px，实际行高可能变成 1.5 × 16 × 1.25 = 30px，而非预期的 30px（表面巧合，逻辑已断裂）
• ❌ 避免：line-height: 24px —— 子元素 font-size: 12px 时，行高反而过大，行间空洞明显

font-size 与 line-height 的黄金比例参考

可读性不是越大越好，而是取决于字号、行高、字体设计和内容密度的平衡。对大多数中西文混排场景，以下组合经实测反馈较稳：

• font-size: 16px + line-height: 1.5 → 行高 = 24px，适合正文段落
• font-size: 18px + line-height: 1.4 → 行高 = 25.2px，稍紧凑，适合标题下引导文
• font-size: 14px + line-height: 1.6 → 行高 = 22.4px，小字号需更大行高防粘连

注意：这些不是硬规则。思源黑体、Inter 等现代无衬线字体字怀较大，line-height: 1.4 可能比 Noto Sans CJK 的 1.4 更透气；而宋体类衬线字体在小字号下建议至少 1.6。

使用 rem 设置 font-size 时，line-height 仍应保持无单位

很多人用 rem 做响应式字号（如根元素 font-size: clamp(14px, 2.5vw, 18px)），但忘了 line-height 必须同步适配。此时若写 line-height: 1.5rem，就等于固定了绝对行高（例如根字号是 16px 时，1.5rem = 24px），失去响应能力。

html {
  font-size: clamp(14px, 2.5vw, 18px);
}
p {
  font-size: 1rem;      /* 实际随视口变化 */
  line-height: 1.5;     /* ✅ 正确：始终是当前 font-size 的 1.5 倍 */
  /* line-height: 1.5rem; ❌ 错误：脱离当前字号，变成固定像素值 */
}

行高塌陷问题：inline 元素与 vertical-align

当行内元素（如 、图片）混排时，line-height 表现可能“消失”或错位——本质是 vertical-align 默认值 baseline 导致行框高度被拉高，视觉上像行高没生效。

• 检查是否混入了未设置 vertical-align 的 或
• 对图标类 或 ，显式加 vertical-align: middle 或 -0.125em 对齐文本中线
• 避免给行内容器（如 ）设 line-height，它不产生块级行框；应设在父
  或 上

  真正影响段落呼吸感的是块级元素的 line-height，不是每个内联子元素都该调这个值。