line-height 设为无单位数值最稳妥，如1.5，因其相对于当前font-size倍数，可继承缩放；带单位值易导致行高僵化，小字号需增大倍数（如12px用1.7），并影响行盒高度与vertical-align。
用 line-height 控制文本行距时，直接写数字（如 1.5）比带单位（px、em、rem）更可靠。带单位的值会强制继承固定高度，子元素字体大小变化后容易撑开或重叠；无单位数值是相对于当前元素 font-size 的倍数，天然可继承、可缩放。
常见错
误：在全局 body 里写 line-height: 24px，结果 h1 字号变大后行高没跟着变，文字贴顶或留白过大。
line-height: 1.5 → 推荐，子元素自动按自身 font-size 计算实际像素值line-height: 1.5em → 看似合理，但会叠加父级 line-height，易引发意外倍增line-height: 24px → 避免，脱离字体大小，响应式场景下失效字号越小，人眼对行间空隙越敏感。12px 文字若还用 1.2 行高，视觉上会显得拥挤；16px 以上可用 1.4–1.5，而 12–14px 建议调到 1.6–1.8。
这不是玄学——小字号下字体渲染的 hinting 和 subpixel 显示会让基线间距感知变窄，必须靠增大 line-height 补偿可读性。
line-height: 1.5（≈24px 实际行高）line-height: 1.7（≈20.4px，比 1.5×12=18px 更舒适）line-height: 1.2 或 1.3 即可，太大反而割裂line-height 不仅决定行内文字间距，还直接控制该行盒（line box）的高度，进而影响 vertical-align 行为。比如图片和文字混排时，若容器未设 line-height，浏览器按默认（通常约 1.1–1.2）生成行盒，图片底部常悬空。
典型现象：文字旁放一个 16px 高图标，看起来总比文字低一截——其实是图标按基线对齐，而行盒高度不足，留空被压到了下方。
line-height（如 line-height: 1.5），能统一行盒高度vertical-align: middle 或 text-top 微调图标位置input、button 等替换元素上乱设 line-height，可能破坏原生垂直居中逻辑想让行高随字号线性增长但保留最小余量，可用 calc()，例如：line-height: calc(1em + 0.2rem)。这在现代项目中可行，但要注意：
calc() 在 line-height 中的使用（会忽略整条声明）calc() 里的混合单位解析不稳定，建议测试 iOS 12–13font-size 变化动态更新，但多数场景没必要body {
font-size: 16px;
line-height: calc(1em + 0.25rem); /* ≈ 1.25 倍，且随根字号缩放 */
}真正难的不是设多少，而是意识到 line-height 是行盒的「高度控制器」，不是单纯的「文字间距开关」。它牵扯字体渲染、内联布局、响应式缩放，改一处常连带三处异常——调完记得看图文混排、小字号段落、以及缩放至 125% 后是否依然自然。