HTML中普通空格会被浏览器压缩为一个，真正可靠的是 实体；其他空格实体宽度各异且兼容性差，CSS的white-space属性或text-indent等更推荐用于排版。

HTML里空格不是“敲几个就显示几个”，浏览器默认会把连续空格、制表符、换行全压缩成一个普通空格——这是绝大多数空格问题的根源。

为什么直接敲空格没用

HTML解析器把普通空格（ASCII 32）当作“可折叠空白符”，不管你在源码里写多少个 、空格键、\t或\n，只要在文本流中连续出现，最终渲染时只剩一个。这不是bug，是规范行为。

• 常见错误现象：想让“姓名：  张三”显示两个空格，结果只看到一个
• 使用场景：表单标签对齐、中英文混排间距、诗歌缩进、数字与单位紧贴（如“199 元”）
• 性能影响：无；但滥用 会导致HTML体积增大、可读性下降
• 兼容性：所有浏览器一致，无需担心

用什么空格实体能真正生效

必须用字符实体替代普通空格，不同实体宽度和行为差异明显，选错会导致排版错位或复制粘贴异常。

•  （U+00A0）：不换行空格，视觉宽度≈普通空格，但不会被合并、不会断行，适合防拆分（如“Mr. Smith”）
•  （U+2002）：半角空格，固定为0.5em宽，中英文混排微调首选（如“HTML CSS JavaScript”）
•  （U+2003）：全角空格，固定为1em宽，中文首行缩进可用（如“  段落正文”），但注意：复制到代码编辑器可能引发语法错误
•  （U+2009）：窄空格，约1/6em，适合极精细控制（如数学公式符号间距）

white-space属性比空格实体更可控

当需要整块文本保留原始空格/换行（比如日志输出、代码片段），硬塞一堆 不如用CSS控制。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

立即学习“前端免费学习笔记（深入）”；

• white-space: pre：完全保留空格和换行，类似<pre>效果
• white-space: pre-wrap：保留空格和换行，但允许自动折行，兼顾可读性与排版
• white-space: nowrap：强制单行，空格照常合并，仅阻止换行
• 注意：white-space对内联元素（如<span>）生效需配合display: inline-block等设置

动态插入空格时容易踩的坑

JS生成内容时用字符串拼接空格，稍不注意就会失效或污染数据。

• 错误写法："Hello" + " " + "World" → 中间仍是普通空格，可能被压缩
• 正确写法："Hello" + "\u00A0" + "World" 或 "Hello World"（直接写实体）
• 复制粘贴陷阱： 在浏览器中显示正常，但用户复制后变成普通空格（ASCII 32），下游系统可能无法识别原意
• 服务端渲染注意：模板引擎（如Jinja2、Thymeleaf）可能自动转义 ，需确认是否双重编码成 

真正难的不是选哪个空格，而是判断该不该用空格——多数排版问题其实该交给text-indent、padding、letter-spacing或Flex布局解决，空格实体只是最后的兜底手段。