盒模型高度由 font-size 与无单位 line-height 共同决定，并受字体度量（ascent/descent）影响；display: inline/inline-block 元素中该高度参与行框计算，易致布局错位；box-sizing: border-box 无法约束字体内部撑高，需用 flex + align-items 或合理 line-height 控制。
font-size 和 line-height 共同决定盒模型高度
盒模型高度不等于 font-size，而是由 font-size × line-height（加上 ascent/descent 的实际渲染开销）共同撑开的。尤其在 display: inline 或 inline-block 元素中，这个“看不见的高度”会直接参与行框（line box）计算，导致容器莫名变高、相邻元素错位、vertical-align 失效。
常见错误现象包括：button 内文字上下留白不均、span 和 img 垂直对不齐、固定高度容器内文字“悬空”或“顶边”。根本原因不是字体本身有问题，而是没控制好行高与字号的比例关系。
- 始终用无单位
line-height（如1.5），避免line-height: 20px这类绝对值 —— 它会脱离字号缩放，破坏响应性 - 单行文本容器建议设
height≥font-size× 1.2，再配line-height: 100%或等高值，让文字真正在行框内居中 - 中英混排时，
line-height: 1.5–1.7是安全区间；低于 1.4 易塌陷，高于 1.8 易撑裂布局 - 慎用
height: 100%或min-height固定值包裹文本 —— 它们会截断行高计算，尤其遇到sup、emoji 或 fallback 字体时
为什么 box-sizing: border-box 不能解决字体高度偏差
box-sizing: border-box 只影响 width/height 对 padding 和 border 的包含逻辑，对字体撑开的内部高度毫无约束力。哪怕你写了 height: 40px; box-sizing: border-box;，只要内容行高超过 40px，容器仍会溢出或触发滚动/换行。
真正需要干预的是内容区的垂直空间分配机制：
- 若需严格限制容器高度，优先用
display: flex; align-items: center;+overflow: hidden;，而非硬设height - 按钮、标签类组件建议用
padding控制内外留白，而非依赖line-height撑高 —— 更可控，也兼容旧引擎 - 对图标+文字组合，统一设
vertical-align: middle;并确保父容器font-size与图标尺寸匹配（如 icon 使用1em单位） - 测试时打开 Chrome DevTools → Rendering → Show layout shift regions，能直观看到文字区域是否超出预期盒模型边界
移动端 font-size 动态变化加剧高度不可控
用 vw 或 clamp() 做响应式字号时，如果没同步调整 line-height，高度偏差会被放大。例如 font-size: clamp(14px, 4vw, 20px) 在 iPhone 横屏下可能缩到 16px，但若 line-height 写死为 24px，那行高就变成字号的 1.5 倍；而小屏下 14px 字号配同样 24px 行高，比例就跳到 1.7 —— 视觉节奏全乱。
正确做法是让行高也随字号弹性变化：
- 继续用无单位
line-height（如1.6），它天然跟随font-size缩放 - 避免在
clamp()内混用不同单位；若必须用像素行高，请配合 JS 监听resize动态重设，但代价高，不推荐 - viewport meta 必须存在且合理：
<meta name="viewport" content="width=device-width, initial-scale=1">—— 否则vw基准失效，所有计算偏移 - 老安卓机不支持
clamp()？降级用rem+ 媒体查询，同时确保根字号通过 JS 动态适配 dpr
vertical-align 对齐失败的底层原因
当 vertical-align: middle 看似无效，大概率不是写错了，而是它作用的对象不对：该属性只对 inline、inline-block、table-cell 元素生效，对 flex 或 grid 子项完全无意义。更隐蔽的问题是，它的对齐基准线（baseline）受字体度量影响极大 —— 不同字体的 ascent/descent 差异会让同一行里的多个 span 实际基线位置不同。
实用对策：
- 对齐目标明确时，改用
display: flex; align-items: center;，彻底绕过基线计算 - 保留
vertical-align场景下，统一父容器font-family栈，减少 fallback 导致的 metrics 波动 - 调试时在 DevTools 的 Computed 面板里查看 “Ascent”、“Descent”、“Line height” 三项真实数值，比凭感觉调
top更可靠 - 图标字体或 SVG 图标务必设
vertical-align: -0.125em类似微调值（非固定），因为它们的基线常与文字不一致
字体撑高的问题不在表面，而在盒模型、行框、基线三层叠加的隐性计算里。越想靠一个属性“一招解决”，越容易掉进兼容性和语义错位的坑里。最稳的路径是：用无单位 line-height 锁定比例，用 flex 替代 vertical-align 控制对齐，用 DevTools 的 Metrics 面板验证真实渲染结果 —— 而不是靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
