直接给button加padding即可生效，因其默认按inline-block渲染；需注意line-height和vertical-align对视觉的影响，推荐成对设置padding并配合box-sizing:border-box、border-radius及rem单位。
直接给 button 加 padding 就行，别绕弯
现代浏览器默认把 button 当作 inline-block 渲染，所以写 padding: 12px 24px; 立刻生效，不需要额外设 display 或 box-sizing——除非你之前改过全局盒模型。
常见错觉是“上下 padding 没反应”，其实是按钮默认有 line-height 和 vertical-align 干扰视觉判断，不是 padding 失效。用开发者工具检查 computed styles，能看到 padding-top 和 padding-bottom 确实已应用。
- 单行文字按钮推荐两值写法：
padding: 10px 16px;（上下 10px，左右 16px） - 图标按钮建议多留空间：
padding: 10px 20px;，避免图标贴边 - 移动端触控区域至少保证总高度 ≥ 44px，
padding: 12px 20px;是较稳妥的起点 - 别写
padding: 10;（缺单位），也别混用margin的逻辑——它不认pt-2这类命名
padding 让按钮变宽？先看 box-sizing
如果你设了 width: 100px; 又加 padding: 10px;，结果按钮实际宽 120px，问题不在 padding 本身，而在默认的 box-sizing: content-box：此时 width 只算内容区，padding 和 border 额外叠加。
解决方法很简单：全局加一句 * { box-sizing: border-box; }，让所有元素的 width 和 height 包含 padding 和 border。这是现代 CSS 布局的基石，不是可选项。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 没加
border-box时，padding越大，按钮越容易撑破父容器或破坏栅格 - 加了之后，
width: 100px; padding: 10px;就真等于总宽 100px，内容区自动压缩 - 如果只针对按钮单独修复，写
button { box-sizing: border-box; }也行，但不如全局统一省心
和 line-height、font-size 耦合，别只调一个
padding 不是孤立参数。按钮里文字是否“飘”、图标是否“压底”、多行文本是否溢出，都取决于它和 line-height、font-size、vertical-align 的配合。
比如 padding: 8px 16px; 在 font-size: 14px 下很舒服，换成 font-size: 18px 后可能上下显得局促；再塞个 svg 图标，vertical-align: baseline 默认值又会让底部多出空白。
- 纯文字单行按钮，优先用
height + line-height控制整体高度，再配padding: 0; - 含图标或需响应式缩放，用
rem单位：padding: 0.75rem 1.25rem;，随根字体变化 - 图标按钮务必检查
vertical-align，middle或top通常比默认baseline更稳 - 设了
border-radius后，圆角半径不能大于padding值，否则内容会顶到弧线边缘
别把 margin 和 padding 搞混，按钮间距不是靠它
两个按钮之间看起来“挨得太近”，第一反应不该是给它们加 padding。因为 padding 扩张的是按钮自身的点击热区，不是按钮之间的布局空隙——你看到的“间隙”其实是两个按钮各自的 padding 区域在视觉上紧贴，而非真实留白。
真正控制按钮间距的，是 margin 或现代方案 gap。误用 padding 会导致热区重叠、点击误触发，尤其在小屏触控场景下更明显。
- 并排按钮用
margin-right+:last-child清尾：button { margin-right: 8px; } button:last-child { margin-right: 0; } - Flex 容器下直接用
gap: 8px;，语义清晰且自动规避末尾多余间距 - HTML 换行符也会造成“假间隙”，检查源码是否写了
<button>A</button>\n<button>B</button>，临时合并成一行验证 - 禁用状态
:disabled下padding不变，但颜色变淡可能掩盖留白效果，需同步检查对比度
实际调的时候，先确认有没有全局 box-sizing: border-box，再看按钮是否含图标或特殊字体，最后才微调 padding 数值——顺序错了，后面全白调。
