结论：别用空格字符控制布局间隔，该用css的margin、padding或gap；只有文本内需多个可见空格时，才考虑或white-space。因html解析器默认将连续空白符压缩为单个空格，且块级元素间换行不产生间隙，inline-block元素间换行却产生约4px间隙，而破坏语义，故布局间隔必须由css控制，文本内空格才用实体或white-space。
直接说结论：别用空格字符控制布局间隔，该用 CSS 的 margin、padding 或 gap；只有文本内需要“多个可见空格”时，才考虑 或 white-space。
为什么直接敲空格不管用
HTML 解析器默认把连续空白符（空格、换行、制表符）压缩成一个空格，且只在行内上下文中渲染这个“一个空格”。你在源码里写十行缩进或五个空格，浏览器几乎全当没看见。
- 块级元素（如
<div>）之间换行 → 通常不产生任何间隙 <li>但设了 <code>display: inline-block的元素之间换行 → 会变成约 4px 的真实间隙（由父容器font-size决定） -
<pre class="brush:php;toolbar:false;"></pre>里写空格能保留，但它强制等宽字体、破坏语义，不该为“加间距”滥用 -
margin：用于元素之间的外部距离，比如两个按钮之间留空 →button + button { margin-left: 12px; } -
padding：用于内容到边框的内部留白，比如表格单元格文字离边框远点 →td { padding: 8px 12px; } -
gap：Flex/Grid 容器专用，替代老式margin手动计算 →display: flex; gap: 16px;，天然忽略子元素间源码空白 - 插入一个不可折叠空格：用
- 要更窄空格：用
- 整段保留空格格式：给容器加
white-space: pre-wrap，比<pre class="brush:php;toolbar:false;"></pre>更可控，且不强制等宽字体 - 误用高发区：
white-space: nowrap会吞掉所有中间空格，图标+文字若靠空格分隔，可能粘连成一块 - 内容内边距：
td, th { padding: 6px 10px; }，可单独给th加更大值 - 真想无缝？用
border-collapse: collapse，此时border-spacing失效，空隙靠padding控制
真正该用的 CSS 间距方案
布局层级的间隔，必须靠 CSS 控制。三种主流方式按优先级排序：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
注意：margin 对 display: inline 元素无效，得先改成 inline-block 或用 gap。
什么时候才用 或 white-space
仅限文本流内部需要“视觉上多个空格”的场景，比如对齐中文标题、模拟缩进、防止换行断开词组：
表格里别碰 cellspacing 和 cellpadding
这两个是 HTML5 废弃属性，只允许写在 <table> 上，不能加到 <code><td> 里，而且无法分别控制横向/纵向间距。
<ul>
<li>替代方案：<code>border-spacing: 8px 4px（需保持 border-collapse: separate）
最易被忽略的一点：空格问题从来不是“怎么多打几个空格”，而是“哪个层级该由谁负责留空”——文本内用实体或 white-space，布局级必须交给 CSS。混淆这两层，八成会掉坑里。
