HTML中普通空格会被浏览器合并忽略，需用 或white-space属性控制显示；但更推荐用CSS的min-width、padding、flex布局实现对齐与留白，兼顾可访问性与兼容性。
HTML 里普通空格不显示？用 或 CSS 控制
浏览器默认会把连续多个普通空格（ ）合并成一个，且首尾空格直接忽略。所以直接敲空格键写在按钮文字里，比如 <button>确 定</button>，实际渲染还是“确定”贴在一起。
要让空格“可见”，常见做法是：
- 用
<button>确 定</button>，能强制显示三个空格 - 给按钮加
white-space: pre;或white-space: pre-wrap;，这样 HTML 源码里的换行和空格都会保留 - 避免用空格对齐文字——模态框按钮宽度通常由内容撑开，靠空格“挤宽”不可靠，改用
min-width或padding
button 内部用 的坑：可访问性 & 复制粘贴问题
是真实字符，在屏幕阅读器中可能被读作“不间断空格”，影响语义；复制按钮文字时也会把 粘出来（变成乱码或不可见字符）。
更稳妥的做法是用 CSS 布局替代文本内空格：
立即学习“前端免费学习笔记（深入）”；
- 按钮统一设
min-width: 80px;+text-align: center; - 需要左右留白，优先用
padding-left/padding-right - 真要微调字间距，用
letter-spacing，但注意别过大导致阅读困难
模态框按钮组里“确认”“取消”不对齐？别靠空格硬凑
常见错误是给“取消”加一堆 让它和“确认”一样宽，结果在不同字体、缩放比例下错位更严重。
正确思路是让按钮组容器控制对齐：
- 把两个按钮包进
<div class="modal-footer"> - 用
display: flex;+justify-content: flex-end;或space-between; - 两个按钮都设
flex: 1;（均分宽度），或分别设min-width并加margin-left: auto;排列
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px;"> <button type="button" style="min-width: 64px;">取消</button> <button type="button" style="min-width: 64px;">确认</button> </div>
为什么不用 或 ？
（半个汉字宽）、 （一个汉字宽）虽然语义更清晰，但兼容性差：IE9 以下不支持，部分邮件客户端、旧版 WebView 会直接显示为方块或空白。
除非你明确知道运行环境全支持，否则一律用 （所有浏览器都认）或纯 CSS 方案。另外注意： 是 HTML 实体，不能写在 JS 字符串里直接 innerHTML，得用 ' '（记得转义 &）。
真正麻烦的不是怎么打空格，而是没想清楚：这个空格到底是要“视觉留白”还是“语义分隔”。前者交给 CSS，后者不该出现在按钮文字里。
