应使用CSS padding设置button内边距，因HTML无padding属性；需指定单位（如px），配合box-sizing: border-box控制总宽，并根据display类型（inline-block/block）确保上下padding生效。
button的padding怎么写才生效
直接在<button>标签里写padding="10"完全无效——HTML没有这个属性，浏览器会直接忽略。必须用CSS设置。
最常用的是行内样式：<button style="padding: 12px 24px;">提交</button>。注意单位不能省：padding: 12 24不生效，padding: 12px 24px才行。
- 单值写法：
padding: 8px→ 四边都是8px - 双值写法：
padding: 10px 16px→ 上下10px，左右16px - 三值写法：
padding: 8px 12px 6px→ 上8、左右12、下6 - 四值写法：
padding: 4px 12px 8px 16px→ 上右下左，顺时针
加padding后按钮变宽了，怎么控制总宽度
默认情况下，width: 100px的按钮加上padding: 10px，实际宽度变成120px（100 + 左右各10）。这不是bug，是W3C盒模型的默认行为。
解决方法是加box-sizing: border-box，让width包含padding：
立即学习“前端免费学习笔记（深入）”；
button {
width: 100px;
padding: 10px 20px;
box-sizing: border-box;
}更推荐全局设置：* { box-sizing: border-box; }，一劳永逸，避免后续反复补。
- IE8及以下不支持
box-sizing，但现代项目基本不用考虑 - 没加
box-sizing时，若需固定总宽，得手动减去padding：比如目标宽100px、左右padding各12px，就得设width: 76px
行内按钮（<button>）设padding为什么上下没撑开
这是常见错觉：其实padding-top和padding-bottom生效了，只是行内元素的垂直padding不改变行高，背景色和点击区域都扩大了，但文字位置没动，看起来像“没反应”。
验证方式：给按钮加背景色，鼠标移到上下padding区域，光标仍能触发点击；或者加border: 1px solid red，就能看到padding区域真实存在。
- 想让垂直padding真正推高容器？改
display：display: inline-block或display: block - 别用
line-height凑数——那只是调文字位置，不扩展可点击范围 - 移动端尤其要注意：小按钮靠padding扩大触控热区，比单纯放大文字更可靠
表格里的按钮内边距怎么单独控制
表格单元格（<td>）本身有默认内边距，容易和按钮自己的padding叠加，导致间距失控。
正确做法是：清掉<td>的padding，再单独给<button>设值：
td {
padding: 0;
}
td button {
padding: 6px 12px;
}别用过时的cellpadding属性——它作用于整个<table>，无法精确到单个按钮，且不符合现代样式分离原则。
- 如果表格用
border-collapse: collapse，还要注意td的padding可能被边框遮挡，建议始终显式设padding - 响应式场景下，
padding用rem或em比px更易缩放，但百分比值是相对父容器宽度计算，慎用于按钮
实际项目里最容易漏掉的是box-sizing: border-box和display类型切换——这两个点不处理，padding看着写了，效果却总不对。
