无单位数值（如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
当行内元素（如 <span>、图片）混排时，line-height 表现可能“消失”或错位——本质是 vertical-align 默认值 baseline 导致行框高度被拉高，视觉上像行高没生效。
- 检查是否混入了未设置
vertical-align的<img>或<input> - 对图标类
<span>或<svg>，显式加vertical-align: middle或-0.125em对齐文本中线 - 避免给行内容器（如
<span class="tag">）设line-height，它不产生块级行框；应设在父<p>或<div>上
真正影响段落呼吸感的是块级元素的 line-height，不是每个内联子元素都该调这个值。
