按钮的 padding 必须显式设置以避免文字贴边，推荐用两值简写如 padding: 8px 16px；margin 仅控制外部间距，不改变按钮尺寸；务必设置 box-sizing: border-box 防止尺寸溢出。
按钮的 padding 要优先设，不然文字会贴边
按钮内容（文字或图标）紧贴边框，是没设 padding 的典型表现。行内元素如 <button> 默认 padding 极小甚至为 0，直接加背景色或边框会显得局促。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
padding必须显式声明，不能依赖浏览器默认值；推荐用两值简写，比如padding: 8px 16px;（上下 8px，左右 16px），兼顾可点击区域和视觉节奏 - 避免只设单边
padding-left或padding-right：容易导致文字偏移、对齐混乱 - 若按钮含图标+文字，左右 padding 建议 ≥ 12px，确保图标呼吸空间；纯文字按钮上下 padding 至少 6px，防止文字被截断
- 注意：
padding不接受负值，设成padding: -4px;会被浏览器静默丢弃
按钮的 margin 用来控制与其他元素的距离，不是调按钮自身大小
常见错误是把 margin 当成“加大按钮”手段——它只影响按钮和周围元素（如相邻按钮、段落、输入框）之间的空隙，不改变按钮本身的宽高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多个按钮并排时，用
margin-right统一右间距，末尾按钮加margin-right: 0;避免多余空白 - 垂直方向慎用
margin-top/margin-bottom：相邻块级元素间可能发生外边距合并（margin collapse），比如两个按钮之间实际只显示较大的那个 margin 值 - 想彻底避免合并？给父容器加
overflow: hidden;或padding: 1px;，比硬调每个按钮的 margin 更可靠 - 水平居中单个按钮？用
margin: 0 auto;，但前提是按钮有明确宽度（如width: 200px;）且是块级元素（display: block;）
行内按钮设 padding 后，垂直方向可能“不顶用”
原生 <button> 是替换元素（replaced element），默认行为接近 inline，所以 padding-top 和 padding-bottom 实际生效，但行高（line-height）不变——你会看到背景撑开了，但上下文字位置没变，容易误判“没起作用”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用纠结是否要改
line-height：只要padding设了，点击热区和视觉填充就已扩大，这是正确行为 - 如果按钮需严格对齐文字基线（比如和旁边
<span>并排），统一设vertical-align: middle; - 真要完全控制高度？把按钮设为
display: inline-block;或display: flex;，再配height和align-items: center;
box-sizing: border-box 必须加，否则 padding 会让按钮变宽
默认盒模型下，width: 100px; + padding: 10px; = 实际占用 120px 宽度，极易撑破容器或破坏栅格布局——尤其在响应式场景里，这是最常被忽略的根源问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局加这一句：
* { box-sizing: border-box; }，所有按钮自动纳入“宽高含 padding”的计算逻辑 - 若只针对按钮，写
button { box-sizing: border-box; }也行，但不如全局重置稳妥 - 配合
border使用时更明显：设border: 2px solid #ccc;+padding: 8px;+width: 120px;，最终就是严丝合缝的 120px 宽
真正容易被忽略的是：按钮的 padding 和 margin 本质服务不同对象——前者撑开内部交互区域，后者管理外部布局关系。混用或漏掉 box-sizing，轻则尺寸错乱，重则响应式失效。
