应使用 实体实现真正的空格，因其为不可换行空格，能抵抗浏览器空白合并；而 等同普通空格仍会被压缩，CSS外边距是首选方案， 仅作CSS不可达时的兜底。

HTML 里怎么打出真正的空格（不是自动合并的）

浏览器默认会把连续的普通空格、换行、制表符全部压缩成一个空格，所以直接敲空格键没用。要让空格“显形”且不被折叠，得用 HTML 实体或 CSS 控制。

•   是最常用也最稳妥的选择，代表 No-Break Space，强制显示一个不可换行的空格
• 多个   连用（比如    ）能模拟多个空格效果，适合简单对齐或微调间距
• 避免用   或   做列表项间空隙——它们语义是排版单位（对应 2/4 字符宽），在不同字体下表现不稳定
• 注意：  在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 或 &lt;code&gt;white-space: pre&lt;/code&gt; 环境里和普通空格行为一致，不会额外生效&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;列表项（&lt;code&gt;<li>&lt;/code&gt;）之间加空格的推荐做法&lt;/H3&gt; &lt;p&gt;别在 &lt;code&gt;<li>&lt;/code&gt; 标签之间硬塞 &lt;code&gt; &lt;/code&gt;，既难维护又语义错乱。真正干净的做法是用 CSS 控制间距：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;给 &lt;code&gt;<ul>&lt;/code&gt; 或 &lt;code&gt;<ol>&lt;/code&gt; 设置 &lt;code&gt;margin-bottom&lt;/code&gt; 或 &lt;code&gt;padding-bottom&lt;/code&gt;，统一控制项间距离&lt;/li&gt; &lt;li&gt;更精准的做法是给 &lt;code&gt;<li>&lt;/code&gt; 加 &lt;code&gt;margin-bottom&lt;/code&gt;（比如 &lt;code&gt;margin-bottom: 0.5em;&lt;/code&gt;），最后一项用 &lt;code&gt;:last-child&lt;/code&gt; 清掉，避免多余空白&lt;/li&gt; &lt;li&gt;如果必须用内联空格（比如纯文本场景），只在 &lt;code&gt;<li>&lt;/code&gt; 内容末尾加 &lt;code&gt; &lt;/code&gt;，而不是放在标签之间——后者会被浏览器忽略或归为无效空白&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt; &lt;/code&gt; 和 &lt;code&gt;&amp;#32;&lt;/code&gt; 有什么区别？该选哪个？&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&amp;#32;&lt;/code&gt; 是空格字符的十进制 HTML 实体，等价于键盘空格，仍受浏览器空白合并规则约束；而 &lt;code&gt; &lt;/code&gt; 是专门设计来“抵抗合并”的。实际效果差异明显：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill5859&quot; title=&quot;SEO for Agents&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179067809769926.jpg&quot; alt=&quot;SEO for Agents&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill5859&quot; title=&quot;SEO for Agents&quot;&gt;SEO for Agents&lt;/a&gt; &lt;p&gt;AI智能体及智能体服务网站的SEO与可发现性优化。涵盖llms.txt协议、智能体可发现性结构化API、GEO（生成式引擎优化）等技术。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill5859&quot; title=&quot;SEO for Agents&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;<p>hello<span> </span>world</p> ← 显示为 “hello world”（三个可见空格） <p>hello<span>&amp;#32;&amp;#32;&amp;#32;</span>world</p> ← 显示为 “hello world”（只剩一个空格）</pre> <ul> <li>需要“可见、稳定、不合并”的空格，一律用 <code> 
• 几乎没优势，还容易让人误以为它比普通空格更“强”
• XML/XHTML 场景下   也更通用，不用查编码表

为什么不用 <br> 或外边距替代空格？

<br> 是换行符，不是空格，用它分隔列表项会破坏语义结构，导致屏幕阅读器误读、SEO 权重分散；而外边距（margin）虽是首选方案，但若遇到内联元素、行高干扰或 legacy 模板无法改 CSS 的情况，  就是唯一可靠兜底。

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

• 纯文本邮件模板、CMS 富文本编辑器输出、老系统前端嵌入等场景，  是事实标准
• 用 margin 时注意：IE8 及更早版本对 :last-child 支持差，需用 :first-child 反向处理或 JS 补丁
• 移动端小屏下，固定像素的 margin 可能不如相对单位（如 em 或 rem）灵活

真正麻烦的不是选哪个符号，而是混用 CSS 和 HTML 实体来控制同一处空白——容易互相覆盖、调试困难。优先走 CSS 路线，  只在 CSS 不可达时才出手。