实现可控空格应据需求选择：文本内空隙用 或white-space属性，元素间距离用margin/padding； 最稳妥，white-space:pre-wrap推荐日常使用，CSS间距属性更利于维护。

浏览器会把连续空格压缩成一个，所以直接敲空格键没用——要实现可控空格，得靠  、<pre class="brush:php;toolbar:false;">&lt;/code&gt;、&lt;code&gt;white-space&lt;/code&gt; 或 CSS 间距属性，选哪种取决于你要控制的是「文本内空隙」还是「元素间距离」。&lt;/p&gt; &lt;H3&gt;用 &lt;code&gt; &lt;/code&gt; 插入不可折叠的空格&lt;/H3&gt; &lt;p&gt;这是最直白的办法，每个 &lt;code&gt; &lt;/code&gt; 渲染为一个固定宽度、不换行、不被合并的空格。适合词间微调或防断行（比如 “第 1 章” 不会被拆到两行）。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;写法必须是 &lt;code&gt; &lt;/code&gt;，不是 &lt;code&gt; &lt;/code&gt;（少个 &lt;code&gt;&amp;&lt;/code&gt; 会被当成普通字符显示）&lt;/li&gt; &lt;li&gt;需要 3 个空格？就写 &lt;code&gt; &lt;/code&gt;；别图省事复制粘贴全角空格，兼容性差且编辑器可能误判&lt;/li&gt; &lt;li&gt;它只影响文本流，不能用于 &lt;code&gt;class&lt;/code&gt; 或 &lt;code&gt;id&lt;/code&gt; 属性值里当分隔符（属性值中空格仍是分隔作用）&lt;/li&gt; &lt;li&gt;宽度约等于一个英文字符，在等宽/比例字体下都稳定；&lt;code&gt;&amp;ensp;&lt;/code&gt;（半宽）、&lt;code&gt;&amp;emsp;&lt;/code&gt;（全宽）在老浏览器（如 IE8）里支持不全，慎用&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;用 &lt;code&gt;white-space&lt;/code&gt; 保留原始空白&lt;/H3&gt; &lt;p&gt;当你有一段含多个空格和换行的文本（比如代码片段、诗歌、对齐表格），又不想手动补一堆 &lt;code&gt; &lt;/code&gt;，就该上 &lt;code&gt;white-space&lt;/code&gt;。它作用于整个容器，不是单个字符。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;white-space: pre;&lt;/code&gt;：原样保留所有空格、制表符、换行，但默认用等宽字体；想改字体得加 &lt;code&gt;font-family&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;white-space: pre-wrap;&lt;/code&gt;：推荐日常用——保留空格和换行，同时允许文本在容器边界自动折行&lt;/li&gt; &lt;li&gt;&lt;code&gt;white-space: pre-line;&lt;/code&gt;：合并连续空格，但保留换行；适合清理杂乱空格又想留换行的场景&lt;/li&gt; &lt;li&gt;别给 &lt;code&gt;&lt;p&gt;&lt;/code&gt; 或 &lt;code&gt;&lt;div&gt;&lt;/code&gt; 直接设 &lt;code&gt;pre&lt;/code&gt;，否则整段文字都变等宽、不折行，破坏阅读流&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 标签快速包裹格式化内容&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 是 &lt;code&gt;white-space: pre;&lt;/code&gt; 的 HTML 语法糖，适合临时处理一小段需要“所见即所得”的文本。&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/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg&quot; alt=&quot;财经HTML高端海报生成&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&quot;&gt;财经HTML高端海报生成&lt;/a&gt; &lt;p&gt;复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10828&quot; title=&quot;财经HTML高端海报生成&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;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;写法简单：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;姓名： 张三</pre>，里面混用   也行

缺点明显：默认 font-family: monospace，若页面是无衬线字体，视觉割裂；需额外加 style="font-family: inherit;" 覆盖

它会把制表符 \t 渲染为 8 字符宽，不是 4；想统一缩进，不如用 text-indent 或 padding

不适合大段正文嵌套——语义上它表示“预格式化”，搜索引擎和读屏器会按代码块理解，影响可访问性

用 letter-spacing 或 word-spacing 做视觉间距

如果目标不是插入“空格字符”，而是让文字看起来更宽松，CSS 间距属性比堆   更干净、更易维护。

• letter-spacing：调字符间距，对中英文都有效；letter-spacing: 2px; 比塞两个   更轻量，且响应式时可用 em 单位适配字号
• word-spacing：专治英文单词间隔；对中文几乎无效（中文没空格分词），别指望它拉开汉字距离
• 它们不生成真实空格，所以 innerText 取出来没额外空格，不影响文本分析或 SEO
• 负值可用但要小心：letter-spacing: -1px; 可能导致文字粘连，尤其小字号下

真正难的不是“怎么加空格”，而是判断该用字符级方案（  / white-space）还是布局级方案（margin / padding / text-indent）——前者改内容，后者改容器。混用时容易互相干扰，比如给一个 <span></span> 加了 letter-spacing，又在里面塞  ，结果间距翻倍还不好调试。