浏览器解析HTML时会将连续空白字符折叠为单个空格，这是HTML规范行为；需用 、或white-space属性控制空格显示。
为什么直接敲空格键没用
浏览器在解析HTML时会把连续的普通空格、制表符、换行符全部压缩成一个空格，这是HTML规范规定的空白折叠行为。你写 <p>hello world</p>，最终渲染出来就是 hello world（中间只有一个空格）。这不是bug，是默认规则。
常见错误现象包括：想缩进一段文字却只看到一个空格；表格里 <td></td> 没边框；代码示例里空格全被吃掉。
- 普通空格（键盘空格键）永远会被合并，不能靠它控制排版
- 元素间换行或缩进产生的空格，在DOM中仍是文本节点，但渲染时被忽略
- 即使用了CSS
font-family: monospace，普通空格依然会被折叠
用 插入可控空格
是最常用也最稳妥的方式，它代表Unicode U+00A0（不换行空格），浏览器不会合并它，也不会在此处断行。一个 就是一个可见空格。
适用场景：防止数字与单位分开（如 10 kg）、保持人名缩写连贯（P. T. Barnum）、填充空表格单元格。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 多个空格就写多个：
Hello World→ 显示三个空格 - 不要用
- 动态插入时推荐用
'\u00A0'（JavaScript Unicode写法），比拼接字符串更安全
需要保留原始格式？用 <pre class="brush:php;toolbar:false;"></pre> 或 white-space
当你要显示代码、诗歌、ASCII图这类依赖空格和换行的内容，<pre class="brush:php;toolbar:false;"></pre> 是最直接的选择。它让内部所有空白字符（包括空格、制表符、换行）原样保留，并默认使用等宽字体。
CSS的 white-space 属性提供更灵活的控制：
-
white-space: pre—— 完全保留空格和换行，不自动换行 -
white-space: pre-wrap—— 保留空格，但允许长行自动换行（最常用） -
white-space: pre-line—— 合并空格，但保留换行符 - 别用
white-space: normal试图“修复”空格——它就是默认行为，什么也不改
表格空单元格必须用
空 <td></td> 在部分浏览器（尤其旧版 Safari/IE）中可能不渲染边框或背景，导致表格结构塌陷。这是因为渲染引擎认为“无内容”=“无盒模型”，不是样式问题。
是唯一轻量、跨浏览器稳定生效的占位符：
- 它被识别为有效内容，强制触发
<td> 的盒模型渲染 <li>不受 <code>border-collapse: collapse影响，而empty-cells: show在该模式下完全失效 - 宽度最小且字体无关，比
- JavaScript 动态填充时，用
cell.textContent = value || '\u00A0'防XSS，别用innerText
真正容易被忽略的是：空格处理不是纯视觉问题，而是HTML解析阶段就定死的行为。你看到的“没空格”，其实是DOM树构建完成后的结果，不是CSS能后期扭转的。
