17370845950

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% 后是否依然自然。