真正可控又健壮的按钮尺寸控制方式是 padding + font-size + box-sizing 组合，而非直接用 width/height；因 button 默认 inline-block 且受 line-height、padding、font-size 共同影响，未设 box-sizing: border-box 时 width/height 易失效，且 input[type="button/submit"] 不支持 width/height。
直接用 width 和 height 设置按钮尺寸最简单，但容易导致文字被裁切、响应式失效或在不同浏览器中表现不一致——真正可控又健壮的方式，是靠 padding + font-size + box-sizing 组合调节。
button 元素的 width/height 为什么有时不生效？
常见现象：写了 width: 200px 却没变宽，或者按钮文字溢出、上下留白异常。这是因为：button 默认是 inline-block，其实际高度受行高（line-height）、内边距（padding）和字体大小共同影响；若未显式设置 box-sizing: border-box，padding 和 border 会额外撑大总尺寸，让 width 表现“不准”。
- 务必加
box-sizing: border-box，否则width只控制内容区，不含 padding/border - 避免单独依赖
height，它常被line-height或内部换行覆盖 -
input[type="button"]和input[type="submit"]不支持width/height属性（HTML5 中仅input[type="image"]支持原生width属性）
用 padding + font-size 控制按钮尺寸更可靠
这是实际项目中最常用、兼容性最好、也最容易响应式的方法。按钮视觉大小主要由文字大小和四周留白决定，而非硬设宽高。
- 增大
padding（如padding: 12px 24px）直接扩大可点击区域，提升移动端体验 - 调高
font-size（如font-size: 16px）会自然撑开按钮高度，同时保持文字可读性 - 组合使用时，建议统一用
em或rem单位（如padding: 0.75em 1.5em），便于缩放和主题切换 - 若需最小尺寸兜底，加
min-width: 120px或min-height: 36px，防内容过短时按钮塌陷
圆角/图标按钮的尺寸陷阱
当按钮要做成圆形（如头像上传按钮）或带图标的紧凑型按钮时，硬设 width/height 很容易出问题：
- 圆形按钮必须满足
width === height且border-radius: 50%，否则变形；用aspect-ratio: 1更现代但 IE 不支持 - 含 SVG 图标的按钮，若图标本身有 viewBox 或
width/height属性，可能干扰整体尺寸计算 - 使用
white-space: nowrap防止文字换行撑高按钮，尤其在窄容器中 - 测试时务必在 iOS Safari 和 Android Chrome 下检查触摸目标是否 ≥ 44×44px（苹果人机指南要求）
真正难的不是“怎么调大”，而是“怎么在各种文字长度、多语言、缩放比例、高对比度模式下都保持可用”。别只盯着像素值，先理清按钮的语义角色（主操作？危险操作？图标触发？），再选尺寸策略——多数时候，padding 和 font-size 的组合已经够用，width/height 反而成了需要额外维护的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
