中文网页空格“跳”“塌”是因浏览器区分全角、半角、零宽等多字节空格，CSS盒模型按字宽计算导致布局错乱；需用开发者工具识别、CSS控制行为、CI/CD预提交扫描防治。
为什么中文网页里敲空格会“跳”或“塌”？
不是你代码写错了，是浏览器把全角空格、半角空格、 当不同字符处理，而CSS盒模型又按字宽算尺寸——结果就是文字撑开容器、表格列宽忽大忽小、响应式断点偏移。尤其在中英文混排或从Word粘贴内容时， （全角空格）和 混用最易引发错位。
怎么一眼识别多字节空格污染？
打开开发者工具 Elements 面板，右键元素 → “Edit as HTML”，把光标停在疑似空格位置：
- 普通空格：显示为单个
-
- 全角空格
U+3000，在编辑器里常显示为更宽的空白，VS Code 中默认高亮为灰色块 - 零宽空格
：看不见、选不中、查不到，但会干扰 inline 元素换行逻辑
更直接的办法：Ctrl+F 搜索 、 、，再配合正则 /[\u3000\u200b-\u200f\uFEFF]/g 扫描源码。
用 CSS 还是 HTML 处理多字节空格？
优先用 CSS 控制行为，而不是在 HTML 里硬塞 ：
立即学习“前端免费学习笔记（深入）”；
- 需要保留空格且禁换行 →
white-space: pre;（慎用，会破坏响应式） - 需要合并连续空格但保留换行 →
white-space: pre-line; - 中文段落首行缩进 → 用
text-indent: 2em;，别用两个 - 中英文混排间距不均 → 统一用
letter-spacing或word-spacing调整，而非插入空格字符 - 表格单元格对齐 →
td { min-width: 1px; }+table { table-layout: fixed; }，避免空格撑开列宽
例外场景才用 HTML 实体： 仅用于必须阻止换行的位置（如“第 1 页”）， 仅用于需固定两倍字宽的排版锚点（如古籍对齐），其余一律交给 CSS。
CI/CD 流程里怎么防多字节空格引入？
空格污染常来自复制粘贴、CMS 导入、翻译平台导出，靠人工 review 几乎无效。建议在提交前加校验：
- Git hooks 里跑 ESLint +
eslint-plugin-html，规则启用no-multi-spaces和自定义正则检查 - CI 阶段执行脚本：用 Node.js 读取 HTML 文件，匹配
/[\u3000\u200b-\u200f\uFEFF]/并报错 - VS Code 配置
"editor.renderWhitespace": "all"，让所有空格类型可视化 - 团队约定：禁止从 Word/PDF 直接粘贴，用纯文本中转；CMS 输出模板强制过滤
最隐蔽的问题往往藏在看不见的地方——比如一个 插在 <span>价格</span>¥<span>99</span> 中间，会让 Flex 布局在 Safari 下突然折行。这类字符不会出现在控制台警告里，也不会触发 lint 错误，只能靠预提交扫描和渲染快照比对来捕获。
