width/height 对 button 有效，但对 input[type="button/submit"] 常无效，因默认 inline 显示、box-sizing 不匹配、line-height 覆盖及 flex/grid 压缩；可靠方案是 box-sizing: border-box + padding + font-size + min-width/min-height。
width 和 height 对 <button></button> 通常有效，但对 <input type="button"> 或 <input type="submit"> 很可能无效——这不是你写错了，而是浏览器默认样式和盒模型共同导致的。
为什么 width/height 经常不生效
常见现象：写了 width: 200px，按钮没变宽；设了 height: 48px，文字却上下居中异常或被裁切；iOS 上按钮点击区域远小于视觉尺寸。
-
<input type="button">默认是display: inline，而width/height对纯内联元素无效，必须先加display: inline-block或block - 未设置
box-sizing: border-box时，padding和border会额外撑大总尺寸，导致width只控制内容区，实际宽度 =width + padding × 2 + border × 2 -
line-height和font-size会覆盖height：当文字行高大于设定高度时，height被忽略 - Flex/Grid 容器中，若父容器设了
align-items: center或flex-shrink: 1，按钮可能被压缩，此时需加flex: 0 0 auto或显式min-width/min-height
真正可靠的尺寸控制方式：用 padding + font-size + box-sizing
这不是“替代方案”，而是生产环境里最稳定、最易维护的做法。按钮的可点性、多语言适配、缩放兼容性，全靠这套组合。
- 必加
box-sizing: border-box—— 否则所有尺寸计算都不可信 - 用
padding: 12px 24px（或0.75rem 1.5rem）直接扩大热区，比硬设width更符合人机交互规范 -
font-size: 1rem（或16px）自然撑开高度，避免height被覆盖；配合line-height: 1.2精确控制垂直居中 - 加
min-height: 48px和min-width: 120px保底，满足 WCAG 和 Apple HIG 的触摸目标要求 - 若需响应式缩放，统一用
rem单位，根字体缩放时按钮尺寸自动协调
圆形按钮或图标按钮的尺寸陷阱
这类按钮最容易因尺寸写法出问题：看似只是调大一点，结果在 Safari 或旧 Android WebView 中严重变形或溢出。
- 圆形按钮必须保证
width === height，且border-radius: 50%；用aspect-ratio: 1更简洁，但 IE 和部分老 WebView 不支持 - 含 SVG 图标的按钮，要检查 SVG 是否自带
width/height属性——它会干扰父级button的尺寸计算 - 文字过长时默认不换行（
white-space: nowrap），若需多行显示，必须加white-space: normal+display: block+ 显式width - 测试时重点看 iOS Safari：触摸目标是否 ≥ 44×44px；Android Chrome：是否因
transform: scale()导致模糊或焦点偏移
最难的不是让按钮“看起来更大”，而是让它在任意文字长度、任意缩放比例、任意辅助技术环境下，始终具备可预测的点击区域和语义尺寸。别依赖 width/height 做唯一控制手段，尤其当项目要支持国际化或多端适配时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
