按钮尺寸差异导致行高错位的根本原因是vertical-align: baseline使文字基线随字号变化而偏移，统一设vertical-align: middle可轻量解决；带图标或需响应式时应改用inline-flex+align-items: center；慎用line-height强制对齐以防文字截断。
按钮尺寸差异导致的行高错位
纯靠 font-size 或 padding 调整大小，容易让大按钮和小按钮在同一线内上下不对齐——本质是默认 vertical-align 值为 baseline，而文字基线位置随字号变化，视觉上就“漂”了。
- 统一设
vertical-align: middle是最轻量解法，适用于按钮数量少、无复杂布局场景 - 若按钮带图标或需响应式缩放，建议用
display: inline-flex+align-items: center替代纯inline，避免基线计算干扰 - 慎用
line-height强制对齐：它会挤压文字行距，尤其在小按钮里可能让文字被截断
用 class 区分大小但共享样式基底
别为大按钮写一套 CSS、小按钮再写一套——维护成本高，且 hover、focus 状态容易不同步。推荐用一个基础按钮类 + 尺寸修饰符。
- 基础类如
.btn定义border、cursor、transition、outline等共性 - 尺寸类如
.btn--lg和.btn--sm只管padding、font-size、min-height，不重复定义边框或圆角 - 注意
min-height要配合box-sizing: border-box，否则 padding 会撑大实际高度，破坏混排节奏
Flex 布局下按钮尺寸自适应失效问题
把按钮放进 display: flex 容器后，flex: 0 0 auto（默认值）本该保持各自尺寸，但有时小按钮会被压缩——常见于父容器设置了 flex-wrap: wrap 或子项未设 flex-shrink: 0。
- 明确写
flex-shrink: 0防止小按钮被 squeeze - 大按钮若需填满剩余空间，用
flex: 1；但混排时更稳妥的是给它设固定flex-basis（如flex-basis: 120px），避免受文字长度影响宽度抖动 - 移动端要注意：iOS Safari 对
flex子项的min-width处理有兼容性问题，加min-width: fit-content或显式min-width更可靠
按钮文字垂直居中偏移的隐藏陷阱
即使设置了 padding 和 line-height，某些字体（如 PingFang SC、SF Pro）在小字号下会出现文字视觉下沉——不是 CSS 错，是字体本身的度量数据（ascent/descent）导致。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateY(-1px)微调小按钮文字位置，仅作用于.btn--sm - 大按钮通常不受影响，因为字号大后度量误差占比变小
- 真正要警惕的是按钮内嵌 SVG 图标：SVG 默认
vertical-align: baseline，必须显式设vertical-align: middle或套一层display: flex容器
