button文字紧贴边框源于默认盒模型与UA样式中不一致的padding，叠加line-height与font-size不匹配；应优先通过合理设置padding和line-height（1.2～1.5）解决，保持display:inline-block，避免全局重置覆盖。
button文字紧贴边框的视觉成因
这不是“按钮太小”或“字体太大”的简单问题，而是 button 元素默认的盒模型行为 + 浏览器内置样式共同作用的结果。Chrome、Firefox 等现代浏览器会给 button 添加隐式 padding（通常左右各 6–12px），但这个值在不同 UA 样式中不一致；更关键的是，当开发者手动重置 padding（比如设为 0 或极小值）却没同步调整 line-height 或 font-size 时，文字就会直接“撞”到边框内侧。
用 padding 控制文字与边框距离最稳妥
直接改 padding 是最可控、兼容性最好、且语义清晰的方式。不要依赖 text-indent 或 margin——前者只影响首行，后者不改变内边距空间。
-
padding值必须同时设置上下左右，或至少用padding: 8px 16px;这类简写，避免单边设置引发高度计算偏差 - 若按钮含图标（如
<i class="icon-search"></i>），建议统一用padding-inline（现代写法）或padding-left/padding-right，避免图标和文字挤在一起 - 注意：Firefox 对
button的padding渲染略保守，若发现 Chrome 中正常、Firefox 中仍显紧，可加min-width: min-content;防止文字撑不开
line-height 与 font-size 不匹配会放大贴边感
当 font-size 设为 14px 但 line-height 是 1（即 14px 行高）时，文字顶部几乎顶到上边框，底部也贴着下边框——这比单纯 padding 小更难察觉，但更影响可读性。
- 推荐设
line-height: 1.2～1.5（数值，非像素），让文字在行框中有自然呼吸空间 - 避免设
line-height: normal，它依赖字体度量，不同字体渲染差异大 - 如果用了 icon font（如 Font Awesome），其图标本身有内边距设计，此时再设小
padding容易造成图标“悬空”，应优先调padding而非降font-size
别碰 button 的 display: inline-block 默认行为
很多开发者试图用 display: block + width: fit-content 强控尺寸，结果发现文字又贴边了——因为 block 会丢掉 button 原生的垂直对齐逻辑，导致 line-height 失效或基线偏移。
立即学习“前端免费学习笔记（深入）”；
- 保持
display: inline-block（button默认值），这是它能正确响应padding和line-height的前提 - 如需居中对齐父容器，用
text-align: center控制父级，而非给button加margin: auto - 真正要“撑宽”按钮时，用
min-width，而不是靠width: 100%+box-sizing: border-box——后者在 flex 容器里可能被压缩，反而挤压文字
实际中最容易被忽略的点是：你改了 padding，但忘了检查该按钮是否被某个全局重置样式（比如 * { padding: 0; }）覆盖；或者用了 CSS-in-JS 库，其样式注入顺序导致你的 padding 被后加载的规则覆盖。调试时先在 DevTools 中确认 computed styles 里的 padding 值是否生效，再动其他参数。
