line-height与font-size不匹配会导致行盒虚高，应优先使用无单位值（如1.5）实现自动缩放，配合box-sizing: border-box、vertical-align: middle及min-height+line-height组合确保精准对齐。
line-height 与 font-size 不匹配导致行盒撑高
行盒（line box）高度由 line-height 决定，不是由字体大小或内容实际高度决定。当 line-height 远大于 font-size（比如 font-size: 14px; line-height: 28px），即使文字只占一行，行盒也会预留上下空白，造成容器“虚高”。
常见错误现象：按钮、span 或内联元素周围有看不见的空白，导致与其他元素对不齐；浮动布局中父容器塌陷或换行错乱。
- 优先用无单位数值，如
line-height: 1.5，它会按当前font-size自动缩放，避免 px 值在不同字号下失衡 - 若需精确控制，把
line-height设为与font-size相同值（如都是16px），再靠padding补足视觉留白 - 对纯图标或单行文本容器，加
overflow: hidden可裁掉溢出行盒的部分，防止干扰布局
vertical-align 影响内联元素基线对齐
默认 vertical-align: baseline 会让文字、图片、input 等内联级元素按字母基线对齐，但不同元素的基线位置不同（比如 img 默认底部对齐，button 和 input 的基线又略高），造成视觉高度参差。
使用场景：表单控件混排、图文组合卡片、导航栏中图标+文字。
- 统一设
vertical-align: middle是最常用解法，适用于大多数图文混排 - 对
img或图标字体，建议同时设display: inline-block，避免基线行为不可控 - 避免用
vertical-align: top或bottom除非明确需要顶部/底部对齐——它们会放大行盒高度，尤其在多行文本中
box-sizing + padding/border 导致计算高度偏差
元素渲染高度 = 内容高度 + padding + border，但默认 box-sizing: content-box 下，你写的 height: 40px 只指内容区，加上 padding: 8px 和 border: 1px 后实际占位变成 58px，而行盒仍按 line-height 计算，两者自然不一致。
典型问题：按钮在 Chrome 和 Safari 中高度不同；Flex 容器里 button 溢出或换行。
- 必须显式声明
button { box-sizing: border-box; }——通配符* { box-sizing: border-box; }在 Safari 15+ 和部分 Android WebView 中对button失效 - 同步重置
padding和border，例如padding: 8px 16px; border: 1px solid transparent;，避免浏览器 UA 样式干扰 - 慎用固定
height，改用min-height+line-height组合，让文字垂直居中有弹性
Flex/Grid 容器中子项未真正拉伸
align-items: stretch 默认生效，但它只对“未设交叉轴尺寸”的子项起作用。一旦子项写了 height、min-height 或 align-self，拉伸就中断，行盒高度和元素高度便脱钩。
影响范围：卡片列表、响应式网格、侧边栏+主内容布局。
- 移除所有子项的
height、max-height；min-height可保留，但需确认它没超过容器可用空间 - 检查是否被框架样式覆盖，比如某些 UI 库给
img设了align-self: flex-start，需重置为stretch - 图片类子项务必加
height: 100%和object-fit: cover，否则固有尺寸会阻断拉伸 - IE10–11 中
flex: 1必须展开写成flex-grow: 1; flex-shrink: 1; flex-basis: 0%才生效
行盒高度是 CSS 渲染层的底层机制，它不直接暴露，却处处影响对齐。真正要盯住的不是“怎么调高调低”，而是 line-height、vertical-align、box-sizing 和容器对齐策略这四个锚点——任一环节松动，高度就会漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
