按钮高度不一致的根源是padding未统一，应固定padding、font-size并禁用height，配合line-height、box-sizing和统一border策略确保各状态尺寸稳定。
按钮高度不一致是因为 padding 没统一
很多初级项目里按钮看着“一个高一个矮”，其实不是 height 设得不对，而是 padding 值混用了。比如有的写 padding: 8px 16px，有的写 padding: 10px 20px，甚至还有只设上下没设左右的——浏览器会按各自规则计算盒模型，视觉高度自然参差不齐。
解决办法很简单：所有按钮统一用固定 padding + 固定 font-size + 不设 height（让内容撑开）。
- 推荐用
padding: 10px 20px或padding: 12px 24px这类整数对称值，便于维护和响应式缩放 - 避免单独设置
padding-top/padding-bottom，除非有特殊垂直居中需求（此时务必同步调整 line-height） - 如果用了
box-sizing: border-box（建议全局启用），padding就不会意外撑大按钮整体尺寸
文字多的按钮被撑高？用 line-height 控制基线
当按钮里有换行文字、图标+文字、或不同字号混排时，仅靠 padding 无法保证高度一致——因为默认 line-height 会随字体大小浮动，导致行高不一。
正确做法是给按钮统一设 line-height，且值要和 padding 配合：
立即学习“前端免费学习笔记（深入）”；
- 若
font-size: 14px，设line-height: 20px（比字号略大，留出呼吸感） - 若按钮含 SVG 图标，确保图标
vertical-align: middle，否则会下拉基线、抬高整体高度 - 禁用
white-space: nowrap以外的换行控制，除非你明确需要多行按钮（这时应改用min-height而非height）
不同状态（hover / disabled）下尺寸跳变？重置 padding 和 border
常见陷阱：给 :hover 加了 border: 2px solid #007bff，但默认状态是 border: 1px solid #ccc，结果 hover 时按钮突然“胖了一圈”；或者 :disabled 里误加了 padding: 8px，破坏了基准尺寸。
统一策略是：所有状态都继承同一套 padding 和 border-width，仅变颜色或透明度：
- 始终用
border: 1px solid transparent作为基础，hover 时只改border-color - disabled 状态禁用
padding变更，可用opacity: 0.6或cursor: not-allowed表达禁用态 - 慎用
transform: scale()做 hover 效果——它不影响布局流，但可能触发重排错觉
.btn {
padding: 10px 20px;
font-size: 14px;
line-height: 20px;
box-sizing: border-box;
border: 1px solid transparent;
background: #007bff;
color: white;
}
.btn:hover {
border-color: #0056b3;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
真正难的不是写对一次，而是在新增按钮组件、第三方 UI 库嵌入、或设计师临时改稿时，还能守住这一套 padding 规则。别信“看起来差不多”，像素级不一致在用户眼里就是“这个网站很糙”。
