直接写 line-height: 1.5 是安全的；写成 line-height: 1.5em 或 line-height: 24px 就可能让子元素行高失控，因带单位值被继承后直接计算，而无单位数值是基于当前 font-size 动态重算的乘数。
line-height 设置为数值 vs 带单位值，为什么后者容易出错
直接写 line-height: 1.5 是安全的；写成 line-height: 1.5em 或 line-height: 24px 就可能让子元素行高失控。
原因在于：带单位的值会**被继承并直接计算**，而无单位数值是“乘数”，会基于当前元素的 font-size 动态重算。比如父级设了 line-height: 20px，子元素 font-size: 12px，那它的行高还是 20px——字小了，行距却没缩，视觉上就挤。
- 推荐始终用无单位数值（如
1.4、1.6），尤其在可变字体大小的场景（响应式、用户自定义字号） - 绝对单位只适合极少数固定排版区域，例如按钮内单行文字，且需配合
height精确控制 - 避免混用：
line-height: 1.5和line-height: 1.5em在嵌套中表现完全不同，调试时极易误判
body 或全局设置 line-height 后，为什么代码块/表格/按钮反而难读
因为 line-height 是可继承属性，一旦在 body 设为 1.6，所有后代元素（包括 <pre class="brush:php;toolbar:false;"></pre>、<table>、<code><button></button>）都会按此比例放大行高——但这些元素往往已有自身高度逻辑，比如 <pre class="brush:php;toolbar:false;"></pre> 依赖等宽字体和紧凑行距，<button></button> 高度常由 padding + font-size 决定。
- 必须对特殊元素重置：
pre, code, kbd, samp { line-height: 1.3; } -
table建议用border-collapse: collapse+ 显式td, th { padding: 6px 12px; }控制垂直空间，而非依赖line-height - 按钮类组件建议用
height+padding定高，显式设line-height: normal或line-height: 1防止文字上下偏移
line-height 太小导致文字贴底或截断，怎么快速定位是哪一层的问题
典型现象：段落末尾几行文字底部被裁掉，或者光标在输入框里“沉下去”一截。这不是字体问题，而是 line-height 小于当前 font-size 时，行框（line box）高度不足，无法容纳字体的 ascent + descent + leading。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中文字容器，看 computed 标签页里的
line-height和font-size实际值（注意是否被继承覆盖） - 检查是否意外设置了
line-height: 1或line-height: 12px这类硬编码值，尤其在 reset.css 或 UI 框架局部样式中 - 临时加
outline: 1px solid red到该元素，观察行框边界是否真的压住了文字底部 - 移动端更敏感：某些系统字体（如 iOS 的 San Francisco）有更大字形高度，
line-height: 1.2在桌面看着正常，到手机上就贴底
响应式场景下，line-height 要不要随 font-size 动态调整
要，但不是靠媒体查询反复写不同数值，而是继续用无单位值——它天然响应 font-size 变化。真正要动的是基准字号本身。
- 把根字号设为视口相关：
html { font-size: clamp(14px, 2.5vw, 18px); }，再配body { line-height: 1.5; }，整站行距自动缩放 - 避免在
@media里重复设line-height，除非有特殊节奏需求（如大标题需要更宽松行距） - 注意设计系统一致性：如果正文用
1.6，小号说明文字不建议降到1.3，而应保持相同比例，靠字号缩小来实现密度变化
行高不是孤立参数，它和字号、字重、字体度量、容器约束全绑在一起。调一个值前，先确认你是在修显示bug，还是在调阅读节奏——前者盯 computed 值，后者得看真实内容流下的呼吸感。
