结论：别靠堆或敲多个空格凑间距，应使用white-space精确控制空白行为，或用margin/padding等布局属性替代；因浏览器对孤立空格渲染不一致，尤其Safari和旧Edge易忽略，需统一标准化处理并优先采用pre-wrap+tab-size等兼容方案。
直接说结论：别靠堆 或敲多个空格来“凑间距”，那是把语义和样式混在一起，所有浏览器都会出问题。真正靠谱的解法只有两个方向——用 CSS 的 white-space 精确控制空白行为，或用布局属性（margin/padding）替代空格本身。
为什么 在 Safari 和旧 Edge 里经常“消失”
不是它被删了，是浏览器在特定上下文中选择不渲染它：比如紧跟换行符、包裹在 display: inline-block 元素里、或父容器设了 font-size: 0。Safari 尤其严格，会跳过孤立的 。
- 避免单独写
<span>姓名</span>→ 改成<span>姓名 </span> - 需要固定宽度空格时，优先用 Unicode 空格字符
- 若内容来自用户输入，服务端或 JS 输入时就做标准化：
str.replace(/\s+/g, ' ')，再统一用单个空格
white-space 哪些值真能跨浏览器生效
white-space: pre-wrap 是目前最平衡的选择，但要注意它在各浏览器中对制表符 \t 和换行的处理仍有差异：
-
pre-wrap：Chrome 渲染\t为 8 字符宽，Safari 默认 4 字符宽 → 显式加tab-size: 4可对齐 -
pre-line：Firefox 保留换行但折叠空格，IE 完全不支持 → 不要用于需要精确空格数的场景 -
break-spaces：Chrome 83+ / Firefox 73+ 支持，IE/Edge Legacy 不支持 → 生产环境慎用 - 兼容底线写法：
white-space: pre-wrap; word-break: keep-all;，覆盖绝大多数现代浏览器
动态插入 HTML 时空白间隙突然变小？
这是静态 HTML 和 JS 动态拼接之间的根本差异：静态 HTML 中换行缩进会产生文本节点，被解析为一个空格；而 JS 字符串连写（如 `<button></button><input>`）不生成空白文本节点，自然没间隙。
立即学习“前端免费学习笔记（深入）”；
- 统一做法：静态部分也写成无换行格式，或用注释“吃掉”空白：
<button></button><!-- --><input> - 更推荐 CSS 方案：给容器设
font-size: 0，再给子元素单独设字体大小，一劳永逸 - 避免用
display: flex强行“挤掉”间隙——它解决的是布局问题，不是空白解析问题
最容易被忽略的一点：全角空格（U+3000）在 Windows 和 macOS 字体下宽度不一致，同一段含中文和空格的 HTML，在 Chrome（Win）和 Safari（Mac）里左右偏移可能差 2px。前端一律禁用全角空格输入，用半角空格 + CSS 控制才是正解。
