HTML中按空格键输入的半角空格（U+0020）会被浏览器自动合并为一个，不可控；需用 （全角空格）、 （半角空格）或 （不换行空格）等实体实现可控空格，三者宽度、换行行为及兼容性各异，混用易致对齐错乱或class解析失败。
直接说结论：HTML里按空格键打出来的 （半角空格）会被浏览器自动合并、不可控；真要实现「一个中文宽」「不换行」「可累加」的空格，必须用 、 或 这类 HTML 实体，且三者宽度、语义、兼容性完全不同——混用会导致对齐错乱、换行异常、甚至 class 解析失败。
为什么 在 HTML 里“按了等于没按”
HTML 规范把 （U+0020）当作标记分隔符，不是普通文本。所以：
• 连续写 5 个空格，渲染出来只有 1 个
• 在标签属性里混入全角空格（如 class="a b"，中间是 U+3000），整个 class 值会变成字符串 "a b"，CSS 选择器 .a.b 失效
• 从富文本粘贴进来的文本若含 U+3000，后端校验时 ' '.charCodeAt(0) === 12288 才能识别，否则当普通空格处理会截断出错
、 、 的实际宽度和风险点
三者都是 HTML 实体，但视觉表现和稳定性差异极大：
• ：宽度 ≈ 当前字体下小写字母 n 的宽度，等宽字体里很窄（如 16px Consolas 下仅 ~8px），思源黑体下又偏宽，**不适合中文对齐**
• ：固定为 0.5em，即半个汉字宽，font-size: 16px 时稳定为 8px，适合「两字缩进」场景中的一半留白
• ：固定为 1em，即一个汉字宽，font-size: 16px 时稳定为 16px，**中文标题居中、表格列对齐、模拟首行缩进两字，首选它**
• 注意： 有不换行特性， 和 没有——它们会随容器宽度正常换行
需要「可换行的全角空格」怎么办
比如填空题下划线 <u> </u>，目的不是为了“好看”，而是解决真实布局问题：
• 单独用 ：长下划线在窄屏上会溢出容器
• 加 （零宽空格，U+200B）：它不占空间，但告诉浏览器“这里允许断行”
• 交替组合 ：视觉仍是连续全角空格，但超出宽度时会在 处折行
• 别用 + 组合：因为 宽度浮动，折行位置不可预测
立即学习“前端免费学习笔记（深入）”；
动态生成时最容易踩的坑
JS 拼接空格或服务端吐 HTML 时，常见错误：
• 用 String.fromCharCode(12288)（U+3000）生成全角空格：编辑器可能显示异常，复制到 VS Code 里变成
• 拼 " " 字符串但忘了转义，结果页面显示原文本而非空格
• 表单提交前没清洗：用户粘贴的文本含 （Figure Space）或 （Thin Space），导致后端长度计算偏差
• 最稳妥做法：中文文案区域统一用 ，结构属性值（class、id）只用 ，且禁止任何全角字符混入
