button的width/height不生效，主因是默认display为inline-block但受浏览器默认样式、box-sizing（content-box）、flex/grid布局约束（如flex-shrink）及父容器高度塌陷等影响；需重置样式、设display:block/inline-block、box-sizing:border-box或flex:0 0 width。
button 的 width/height 设置为什么有时不生效
直接写 width 和 height 对 <button></button> 有效，但对 <input type="button"> 可能被浏览器默认样式压制——尤其在旧版 IE 或某些移动端 WebView 中。input 默认是 display: inline，而 width/height 对内联元素无效，必须先显式设为 display: inline-block 或 block。
- 稳妥做法：统一给按钮加
display: inline-block再设尺寸 - 若用 Flex/Grid 布局父容器，
width/height通常能直接生效，无需额外 display - 注意：设了
width后，padding会额外撑大总宽度（除非已设box-sizing: border-box）
padding 和 margin 在按钮上该用哪个
按钮文字贴边、点击区域小、视觉拥挤——这些问题几乎全是 padding 不足导致的；而按钮之间距离过大或整体偏移，则大概率是误用了 margin。
-
padding控制文字到边框的距离，直接影响热区大小和可点击性，移动端至少保持padding: 12px 24px -
margin是按钮整个盒子与其他元素之间的空隙，比如两个按钮并排时用margin-right分隔，而不是靠padding - 行内按钮（如
<button></button>默认）的margin-top/margin-bottom在某些布局中可能失效或折叠，优先用padding调整垂直空间
如何避免按钮尺寸失控或布局塌陷
常见现象：设了 padding: 16px，结果按钮宽高远超预期；相邻按钮间空隙比写的 margin 小；父容器莫名“被顶上去”。这基本是盒模型和 margin 折叠惹的祸。
- 全局加
* { box-sizing: border-box }，让width/height包含padding和border，避免反复减算 - 垂直
margin折叠无法禁用，但可用padding-top: 0.1px或overflow: hidden在父容器上触发 BFC 来隔离 - Flex 容器里别给按钮单独设
margin控制间距，改用父容器的gap——更稳定且不触发折叠
响应式按钮尺寸怎么写才靠谱
固定像素值（如 width: 200px）在小屏上容易溢出，单纯用 % 又难控制最小可点区域。关键不是“放大”，而是“适配可操作性”。
- 用
min-width+min-height保底线，例如min-height: 48px（符合 WCAG 触摸目标建议） -
font-size推荐用rem，配合根字体缩放，padding也同步用rem或em，保持比例 - 慎用
transform: scale()做悬停放大——它不改变文档流，但会放大整个渲染层，可能造成边缘锯齿或模糊，且对屏幕阅读器不友好
实际项目里，按钮尺寸问题往往不是单点调整能解决的，而是盒模型理解、布局上下文、可访问性要求三者叠加的结果。最常被忽略的是：没确认当前按钮是否处于 BFC 环境，也没检查它是不是被父级 flex/grid 的对齐方式悄悄拉伸了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
