html 的 width 和 height 属性对普通按钮无效，因其仅支持 ；正确做法是用 css 设置宽高，并配合 box-sizing: border-box 和合理 padding 控制实际尺寸。
直接用 width 和 height 设置按钮尺寸最有效，但必须配合 CSS（内联或外部样式），不能只靠 HTML 属性。
为什么 width="100" 和 height="40" 对普通按钮无效
HTML 的 width 和 height 属性仅对 <input type="image"> 生效；对 type="button"、type="submit" 或 <button></button> 元素完全被忽略。浏览器会无视这些属性，按钮保持默认尺寸。
- 检查控制台是否报错？一般不会报错，只是“静默失效”
- 若误写成
<input width="200" height="50">，实际渲染仍按浏览器 UA 样式走 - 旧教程里提到的
size属性是针对<input type="text">的字符宽度，不适用于按钮
正确设置按钮宽高的三种写法
核心是把按钮当作块级/行内块元素处理，用 CSS 控制尺寸。推荐优先使用类名 + 外部样式表，避免内联样式污染结构。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<button style="width: 120px; height: 44px;">提交</button>：适合单点调试或临时修改 -
<input type="button" value="点击" style="width: 120px; height: 44px;">：注意input默认是display: inline-block，可直接设宽高 - CSS 类写法：
.btn-large { width: 160px; height: 48px; padding: 0; }搭配<button class="btn-large">确定</button>
padding 和 box-sizing 对视觉大小的影响
单纯改 width/height 只控制内容区，而按钮实际占用空间还包含 padding、border。默认 box-sizing: content-box 会让总宽 = width + padding×2 + border×2，容易超出预期。
- 加
padding: 12px 24px后，若仍想让按钮“整体宽 160px”，就得把width调小，或改用box-sizing: border-box - 推荐在重置样式中统一写：
button, input[type="button"], input[type="submit"] { box-sizing: border-box; } - 圆角按钮（如
border-radius: 8px）配合height使用时，确保height≥2 × border-radius，否则顶部/底部会被裁切
真正卡住人的地方往往不是不会写 width，而是没意识到按钮默认有内边距、用户代理样式干扰、或者忘了 box-sizing 的默认行为。调尺寸前先打开开发者工具，选中按钮看 computed 样式里的 actual width/height，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
