line-height 设为无单位数值最稳妥，如1.5，因其相对于当前font-size倍数，可继承缩放；带单位值易导致行高僵化，小字号需增大倍数（如12px用1.7），并影响行盒高度与vertical-align。
line-height 设为无单位数值最稳妥
用 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→ 避免，脱离字体大小，响应式场景下失效
小字号文本需适当提高 line-height 倍数
字号越小，人眼对行间空隙越敏感。12px 文字若还用 1.2 行高，视觉上会显得拥挤；16px 以上可用 1.4–1.5，而 12–14px 建议调到 1.6–1.8。
这不是玄学——小字号下字体渲染的 hinting 和 subpixel 显示会让基线间距感知变窄，必须靠增大 line-height 补偿可读性。
立即学习“前端免费学习笔记（深入）”；
- 正文（16px）：
line-height: 1.5（≈24px 实际行高） - 辅助文案（12px）：
line-height: 1.7（≈20.4px，比 1.5×12=18px 更舒适） - 标题（32px）：
line-height: 1.2或1.3即可，太大反而割裂
line-height 影响内联元素垂直对齐，别只盯文字本身
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() 动态微调时注意浏览器兼容性
想让行高随字号线性增长但保留最小余量，可用 calc()，例如：line-height: calc(1em + 0.2rem)。这在现代项目中可行，但要注意：
- IE 11 不支持
calc()在line-height中的使用（会忽略整条声明） - 旧版 Safari 对
calc()里的混合单位解析不稳定，建议测试 iOS 12–13 - 更稳的替代：用 CSS 自定义属性 + JS 监听
font-size变化动态更新，但多数场景没必要
body {
font-size: 16px;
line-height: calc(1em + 0.25rem); /* ≈ 1.25 倍，且随根字号缩放 */
}真正难的不是设多少，而是意识到 line-height 是行盒的「高度控制器」，不是单纯的「文字间距开关」。它牵扯字体渲染、内联布局、响应式缩放，改一处常连带三处异常——调完记得看图文混排、小字号段落、以及缩放至 125% 后是否依然自然。
