HTML中连续空格被浏览器合并导致文字紧贴，应使用 、CSS的white-space（如pre-wrap）或letter-spacing等方案解决，而非依赖源码空格。
HTML 中普通空格被合并导致文字挤在一起
HTML 默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，如果源码里写了多个空格或换行，浏览器渲染时不会体现。这在需要精确排版时就会让文字“重叠”或紧贴——实际不是重叠，是空格没生效。
- 用
- 避免在 HTML 源码中靠敲空格对齐文字，这是语义错误且不可靠
- 若需多空格效果，优先用 CSS 控制，比如
letter-spacing或word-spacing，而不是堆
CSS 的 white-space 属性控制空格行为
当需要保留源码中的空格、制表符和换行时，white-space 是最直接的解法。它有多个取值，常用的是：
-
white-space: pre;：完全保留空格和换行，但不自动换行（文字超出容器会溢出） -
white-space: pre-wrap;：保留空格和换行，同时允许自动换行（最常用） -
white-space: pre-line;：合并连续空格，但保留换行符
例如处理一段带缩进的日志文本：
div.log-output {
white-space: pre-wrap;
font-family: monospace;
}
JavaScript 动态插入空格时要注意转义
用 JS 设置 innerText 时，空格照常被压缩；改用 innerHTML 并写入 才能生效。但注意别直接拼接字符串引入 XSS 风险。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用
textContent+ CSS 控制间距，或用document.createTextNode(' ')插入真实空格节点 - 危险写法：
el.innerHTML = 'a' + ' ' + 'b'→ 两个空格仍被压缩；必须写成'a b' - 批量处理含空格的文本时，可用正则替换：
str.replace(/ /g, ' ')，但仅限可信内容
字体和 font-variant-numeric 也可能造成视觉重叠
某些等宽字体或启用连字（ligatures）、旧式数字（oldstyle nums）时，字符左右边距异常，看起来像“重叠”。这不是空格问题，但现象相似。
- 检查是否误启用了
font-variant-numeric: proportional-nums;或tabular-nums导致数字宽度不一致 - 用浏览器开发者工具选中文字，看 computed 样式里的
font-family和font-feature-settings - 临时加
font-feature-settings: "liga" 0;关闭连字，确认是否为该原因
空格本身没有“厚度”，所谓重叠往往是渲染逻辑、CSS 行为或字体特性共同作用的结果。先确定是空格失效，还是视觉错觉，再选对应路径——多数时候，white-space: pre-wrap 加上合理字体设置就够了。
