line-height用px单位会让盒子变高，因为其为绝对继承，子元素无论自身font-size多小都直接继承固定像素值（如20px），导致行框高度远超文字实际所需，引发按钮贴顶、卡片空白、flex子项不齐等问题；应改用无单位数值（如1.5）使行高按自身字号计算。
line-height 用 px 单位为什么会让盒子变高
因为 line-height: 20px 是绝对继承，子元素不管自己 font-size 多小，都直接套用这 20px 行高。比如父元素 font-size: 16px，子 span 只有 font-size: 12px，结果行框还是 20px 高——文字被“吊”在中间，上下留白远超预期。
常见现象包括：button 内文字贴顶、card 容器莫名多出空白、flex 子项高度不齐。这不是渲染 bug，是单位语义没对上。
- 改用无单位值：
line-height: 1.5（子元素按自身字号 × 1.5 计算） - 禁用
line-height在input上——它基本无效，靠padding控制留白 - 全局重置可加：
body { line-height: 1.5; }，再按组件微调
为什么 box-sizing: border-box 不能解决字体撑高
box-sizing: border-box 只管 padding 和 border 是否计入 height，对字体内部的 ascent/descent 和行框高度毫无约束力。哪怕你写 height: 40px; box-sizing: border-box;，只要内容行高算出来是 48px，容器照样溢出或换行。
真正要干预的是垂直空间分配机制：
- 单行文本优先用
height+line-height相等（注意减去padding和border） - 按钮类组件建议用
padding控制高度，而非依赖line-height撑高 - 需要严格限高时，用
display: flex; align-items: center;+overflow: hidden;
min-height 怎么设才不被 line-height 绕过
min-height 不是万能兜底。如果设成 min-height: 40px，但内部 line-height: 2em 配合大字号，实际高度仍可能远超 40px——这没问题，min-height 本意就是“至少”，不是“封顶”。
关键是要让它和字体行为协同：
- 设安全下限：例如
min-height: calc(1.6em + 8px)，覆盖行高 + 内边距 - 避免和
height同时出现，否则height会覆盖min-height - 配合
box-sizing: border-box和overflow: hidden，防止意外溢出 - 在
flex容器里，min-height依然生效，但需确认父容器没设align-items: flex-start
按钮文字不居中，光调 line-height 不够
line-height 居中只在极简条件下成立：纯单行、box-sizing: border-box、无 vertical-align、无图标混排、且 line-height 等于「内容区高度」（即 height - padding-top - padding-bottom - border-width × 2）。
现实里几乎总缺一两条，所以更稳的解法是绕过 line-height：
- 给
button加display: flex; align-items: center; justify-content: center; - 确保子元素（如
svg或span）也设vertical-align: middle或统一display: inline-block - 测试时打开 Chrome DevTools → Rendering → Show layout shift regions，看文字区域是否超出预期边界
字体撑高的本质不是样式写错了，而是把行框当成了盒模型的一部分。它看不见、测不出，却真实参与布局计算——最容易被忽略的，恰恰是那些没显式设 height 的容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
