按钮文字紧贴边框应优先用padding解决；因文字是按钮内容，需在内容与边框间留白，padding能撑开尺寸并延伸背景色，而margin只推远整体元素、不改变文字位置。
button文字紧贴边框？优先用padding
按钮文字离上/下/左右边框太近，不是边框或字体问题，而是padding没设或设得太小。默认button的padding极小（各浏览器不同，Chrome约2px，Firefox可能更小），视觉上就显得“挤”。
直接加padding最有效，比如：button { padding: 8px 16px; }——上下8px、左右16px，立刻拉开文字与边框距离。
-
padding必须作用于button本身，不能只调font-size或line-height，后者只影响行高，不增加内边距 - 若只调单边（如只想加大下边距），用
padding-bottom: 12px，但注意padding-top仍为默认值，需一并设清 - 避免用
margin：它拉大按钮和周围元素的距离，不解决文字贴边问题
为什么display: inline-block有时没用？
对button设padding一般无需改display，因为button天生是inline-block元素，能正常响应padding。但如果你把它套在<a></a>里、或用伪元素覆盖、或被父容器display: flex强制压缩，padding可能失效。
检查是否出现以下情况：
- 父容器用了
overflow: hidden且button有较大padding，导致内边距被裁剪 - 写了
box-sizing: border-box但忘了border宽度占用了padding空间，实际可用内边距变小 - 用
transform: scale()缩放过按钮，padding值没同步调整，视觉上又变窄
line-height和padding谁更重要？
两者都影响文字离边框的“视觉距离”，但分工不同：padding控制内容区到边框的绝对空白，line-height控制文字基线到行框顶部/底部的距离。如果按钮高度固定（比如height: 40px），只调line-height可能让文字上下居中但左右仍贴边；只调padding则四边都匀称拉开。
- 优先调
padding——它是专为“内容与边框间距”设计的属性 -
line-height仅在需要精确垂直居中且按钮高度不可变时配合使用，例如：button { height: 40px; line-height: 40px; padding: 0 16px; } - 慎用
line-height大于font-size太多（如line-height: 3），容易导致文字在小屏幕被截断
移动端按钮文字贴边怎么办？
移动端触摸区域小，文字紧贴边框会降低点击容错率。除了加大padding，还要注意单位选择和最小可触面积。
- 用
rem或em代替px：比如padding: 0.5rem 1rem，随根字体缩放，适配高DPI屏 - 确保总触摸高度≥44px（iOS推荐）或48px（Android），可通过
min-height兜底：button { min-height: 44px; padding: 12px 20px; } - 避免
letter-spacing负值：它会让文字向内收缩，反而加剧贴边感，尤其在小字号下
padding，而是加了之后发现没生效——这时候得回头查box-sizing、父容器约束、或者有没有其他CSS规则用!important覆盖了它。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
