按钮高度不一致的根源是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 规则。别信“看起来差不多”，像素级不一致在用户眼里就是“这个网站很糙”。