line-height 用 px 单位易撑大盒子，因绝对继承导致子元素行高不随字号缩放；应优先使用无单位数值（如 1.5），使行高按自身 font-size 计算，避免高度膨胀。
line-height 用 px 单位时最容易撑大盒子，尤其在嵌套结构里；优先改用无单位数值（如 1.5）能根治继承错乱和意外高度膨胀。
为什么 line-height: 20px 会让盒子变高？
当父元素设了 line-height: 20px，子元素即使字体更小（比如 font-size: 12px），也会直接继承这固定的 20px 行高——导致行框（line box）高度远超文字本身，盒子被“硬撑”开。
常见现象：
- 卡片容器莫名多出上下空白
- 按钮内文字贴顶或下沉，点击区域不一致
- Flex 容器中子项高度不齐，
align-items: center失效
根本原因：像素值是「绝对继承」，不随子元素字号变化而缩放。
立即学习“前端免费学习笔记（深入）”；
line-height 的四种单位对盒子高度的影响差异
同一父元素 font-size: 16px，子元素 font-size: 12px：
-
line-height: 20px→ 子元素行高 = 20px（固定，撑高） -
line-height: 1.25em或125%→ 子元素行高 = 16px × 1.25 = 20px（仍按父字号算，一样撑） -
line-height: 1.25（无单位）→ 子元素行高 = 12px × 1.25 = 15px（按自身字号算，自然收缩）
关键区别就在这里：无单位数值是唯一真正“相对自身”的写法。它让每个字号都拥有合理、自洽的行高，避免父级样式污染子级高度。
什么时候必须用 px？怎么安全地用？
极少场景需要强制固定行高，比如：
- 单行文本垂直居中（
height和line-height设为相等） - 与设计稿像素级对齐的标题栏、标签页等静态控件
若真要用 px，务必：
- 只在最末端文本元素上设置（如
p、span），**绝不设在容器级选择器**（如.card、section） - 配合
box-sizing: border-box和明确的height，防止叠加溢出 - 用开发者工具检查 computed 样式里的
line-height值，确认没被意外继承
推荐做法：统一用无单位数值 + 合理基准
全局重置可加这一句：
body { line-height: 1.5; }
然后在具体组件中微调：
- 正文段落：
line-height: 1.6 - 小号说明文字：
line-height: 1.4 - 大标题：
line-height: 1.2（避免空洞感）
记住：行高不是越“大”越好，而是要匹配字号、字重和内容密度。一个 font-size: 48px 的标题用 line-height: 1.5，视觉上会比 1.2 空得厉害——这点容易被忽略，但直接影响排版质感。
