按钮文字间加空格不生效，因html默认合并连续空白；应使用 实体或css white-space: pre-wrap控制，避免用加margin引入冗余节点和排版风险。
按钮文字间加空格的常见错误
直接在 <button></button> 标签里敲多个空格（比如 <button>确 定</button>）不会生效，因为 HTML 默认合并连续空白字符（包括空格、换行、制表符）。浏览器只显示一个空格，甚至可能完全忽略。
用 插入不可折叠空格
这是最直接、兼容性最好的办法：用 HTML 实体 替代普通空格。它代表“不换行空格”，浏览器不会合并或删除它。
示例：
<button>确 定</button>
这样就能稳定显示两个空格。注意： 是实体，不是字符串，必须写成 ，不能写成 " " 或漏掉 &。
用 CSS 的 white-space 控制空白处理
如果按钮内容动态生成（比如 Vue/React 绑定变量），或者需要批量控制，更适合用 CSS：
-
white-space: pre;—— 保留所有空白和换行，但会禁用自动换行 -
white-space: pre-wrap;—— 保留空白，同时允许换行（更常用） - 配合
font-family等宽字体可让空格宽度更一致（非必需，但调试时有用）
示例：
<button style="white-space: pre-wrap;">确 定</button>
为什么不用 <span></span> 包裹加 margin？
有人想用 <span>确</span><span style="margin: 0 8px"></span><span>定</span>，这会引入额外 DOM 节点，且空隙受字体、行高影响不稳定；在按钮内还可能干扰默认垂直居中逻辑。除非有特殊排版需求（比如中间插图标），否则没必要。
真正需要精确空隙控制时，优先选 或 white-space，简单、语义清、无副作用。
容易被忽略的是：服务端模板（如 Django、Jinja）或前端框架（如 React）中，如果文字来自变量， 可能被自动转义为纯文本，这时得用对应框架的安全 HTML 渲染方式（如 React 的 dangerouslySetInnerHTML 或 Vue 的 v-html），否则看到的是一串字面量 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
