直接在 button 元素上设置 letter-spacing 会导致文字错位、图标飘移、移动端点击热区缩小，因其为替换元素，受 ua 样式、字体度量及行盒计算影响；推荐用 span 包裹文字单独控制 letter-spacing。
button 元素上直接设 letter-spacing 会出什么问题
很多开发者一上来就在 <button></button> 标签上加 letter-spacing: 2px，结果发现文字错位、图标变形、小屏点击区域变小——根本不是“加了间距就更好看”。button 是替换元素（replaced element），内部文本渲染受浏览器 UA 样式、字体度量、行盒计算共同影响；尤其在 Safari 和旧版 Chrome 中，letter-spacing 可能被按钮的 padding 压缩或与 line-height 冲突，导致视觉偏移。
常见错误现象：
-
<button>提交</button>加了letter-spacing: 1px后，“提”和“交”之间空隙不均，右侧字贴边 - 带 Font Awesome 图标的按钮（如
<i class="fa fa-check"></i>确定）图标位置飘移 - 移动端点击热区缩小，因为文字撑宽但
padding没同步调整
button 文字间距该用 px 还是 em
用 px 更稳妥。按钮文字通常字号固定（比如 font-size: 14px 或 16px），em 在按钮这种紧凑容器里反而容易因父级缩放或继承异常放大间距，尤其当按钮嵌套在 transform: scale(0.9) 的卡片里时，0.05em 可能变成 0.72px 并被舍入为 0。
实操建议：
- 中文按钮推荐
letter-spacing: 0.5px～1px，避免负值（小字号下易粘连） - 英文大写按钮（如
SAVE）可用letter-spacing: 1.2px，但别超过2px，否则在 320px 宽屏上可能溢出 - 绝对不要用无单位数值（如
letter-spacing: 0.1），它在按钮中会乘以font-size，而按钮的font-size经常由 UA 样式隐式设定，不可靠
为什么 word-spacing 对 button 里的中文完全无效
word-spacing 只作用于“单词”，而浏览器识别单词依赖空格或 Unicode 分隔符。按钮里写 <button>立即购买</button>，中间没空格，word-spacing 就不会生效；哪怕你写成 <button>立 即 购 买</button>，中文词边界仍不被识别，各浏览器表现不一致。
典型误用场景：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 想让“立即购买”四个字等距拉开，却用了
word-spacing: 2px→ 实际毫无变化 - 混排英文按钮如
<button>Login Now</button>，设了word-spacing确实拉开了 “Login” 和 “Now”，但“立即购买”部分依旧不动 - 和
letter-spacing同时设，导致英文单词内字符+词间双重拉伸，视觉失控
真正安全的 button 字间距写法
最稳的方式：不用全局样式，把需要调间距的文字单独包裹，再控制。按钮本身只管尺寸和交互，文字层负责视觉微调。
示例结构：
<button type="button"> <span class="btn-text">立即下单</span> </button>
.btn-text 的 CSS：
-
display: inline-block（防止换行截断） -
letter-spacing: 0.8px（中文稳妥值） -
vertical-align: top（对齐基线，避免上下浮动） - 不设
font-size或line-height，继承按钮默认值
这样既避开按钮 UA 样式的干扰，又保留了可访问性（屏幕阅读器仍读取完整按钮文本），还方便后续加 hover 动效或语言切换逻辑。
容易被忽略的一点：如果按钮里有图标（<svg></svg> 或 <i></i>），它们必须和 .btn-text 同级，且用 margin-inline-end 控制图标与文字间距，而不是靠 letter-spacing 撑开——后者会让图标也参与字距计算，造成错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
