浏览器默认压缩连续空格为一个空格，这是HTML规范的“空白折叠”行为；可用 插入不可折行空格，或用标签/CSS white-space: pre保留原始格式。

直接敲空格为什么没用

因为浏览器默认会把连续的  、\t、\n 甚至多个 （普通空格）全部压缩成一个空格——这不是 bug，是 HTML 规范明确规定的「空白折叠」行为。你在源码里写 This    is 或换三行再加四个空格，最终渲染出来还是 This is。

用   插入不可折行空格

这是最常用也最稳妥的方案，尤其适合单词间、数字与单位之间等不能断行的场景：

•   是 HTML 实体，代表「不换行空格」，浏览器不会压缩它，也不会在行尾自动换行
• 要显示 4 个空格，就写 4 次：This    is
• 注意：必须小写，且末尾分号 ; 绝对不能省略，写成 &nbsp 或   都无效
• 缺点是语义弱，大量使用会影响可读性和 SEO，仅建议用于必要位置（如「¥ 199」、「Mr. Smith」）

用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 或 &lt;code&gt;white-space: pre&lt;/code&gt; 保留原始格式&lt;/H3&gt; &lt;p&gt;当你需要整段文本严格按源码缩进、换行、空格呈现（比如代码块、诗歌、ASCII 图），就该用这个路径：&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/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.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/skill11445&quot; title=&quot;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&quot;&gt;使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审&lt;/a&gt; &lt;p&gt;使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11445&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;ul&gt; &lt;li&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;This is a test</pre>：标签内所有空格、制表符、换行都会原样输出

CSS 方式更灵活：<p style="white-space: pre">This  is  a  test</p>

其他常用值：pre-wrap（保留空格和换行，但允许自动换行）、pre-line（合并空格，只保留换行）

注意：white-space: pre 会让文本失去自动换行能力，长内容可能溢出容器，需配合 overflow 或 max-width 控制

别踩这些坑

实际写 HTML 时，这几个点最容易出错：

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

• 把   写成 &nbsp（缺分号）或  （那是中文全角空格实体，宽度不同且不通用）
• 误以为 <span>    </span> 能“隔离”空格——其实只要前后是行内元素，空格仍可能被折叠或影响布局
• 用 letter-spacing 或 word-spacing 模拟空格，结果发现它作用于所有字符/单词，无法精准控制某两个字之间的间距
• 在 <textarea></textarea> 或 contenteditable 区域里直接粘贴带空格的文本，却忘了服务端或 JS 处理时又做了 trim

空格看似简单，但它的行为由 HTML 解析、CSS 渲染、DOM 操作三层共同决定。真正要「规范处理」，得先想清楚：你要的是语义准确、视觉可控，还是格式完全冻结——选错路径，后面调样式或改结构都会越来越拧巴。