HTML压缩连续空白字符为单个空格是规范行为；需视觉空格优先用CSS（margin/padding/letter-spacing等）；仅当防断行且需单空格时用 ；多空格缩进用或white-space:pre-wrap。

HTML里敲空格键为啥不显示？

HTML会把连续的空白字符（空格、换行、制表符）全部压缩成一个空格，这是规范行为，不是bug。所以直接在代码里打多个空格、回车或 混用，结果往往和预期不符。

常见错误现象：<p>hello world</p> 渲染出来还是 hello world（只一个空格）；用 堆砌又导致语义混乱、复制粘贴出乱码。

• 真正需要“视觉空格”时，优先用CSS控制间距：比如margin、padding、letter-spacing
• 仅当必须在文本流中插入不可折叠的单个空格时，才用 （no-break space）
• 想保留多空格/缩进格式（如代码、诗歌），用<pre class="brush:php;toolbar:false;">&lt;/code&gt;标签包裹，它会原样渲染空白&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;什么时候该用&lt;code&gt; &lt;/code&gt;？&lt;/H3&gt; &lt;p&gt;&lt;code&gt; &lt;/code&gt;只适合解决「两个词之间不能断行 + 必须保持一个空格」的场景，比如单位和数字之间：&lt;code&gt;100 px&lt;/code&gt;、人名中的分隔（&lt;code&gt;John Doe&lt;/code&gt;），避免被折行撕开。&lt;/p&gt; &lt;p&gt;别把它当排版工具：用10个&lt;code&gt; &lt;/code&gt;强行缩进，既难维护，又破坏可访问性（屏幕阅读器会念出“non-breaking space”十次）。&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/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;DeepBI DHTML 页面生成器&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;DeepBI DHTML 页面生成器&lt;/a&gt; &lt;p&gt;生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&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;span&gt;Version 2.4.1&lt;/span&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;错误：&lt;code&gt;&lt;div&gt; 菜单项&lt;/div&gt;&lt;/code&gt;（应该用CSS的&lt;code&gt;padding-left&lt;/code&gt;）&lt;/li&gt; &lt;li&gt;注意：&lt;code&gt; &lt;/code&gt;是HTML实体，不是Unicode字符，不要复制粘贴别人网页里的“看起来像空格”的怪符号&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;CSS替代方案比&lt;code&gt; &lt;/code&gt;更可靠&lt;/H3&gt; &lt;p&gt;几乎所有“想空格”的需求，本质是“想控制间距”，而CSS才是为此设计的。用样式而非字符，逻辑清晰、响应式友好、维护成本低。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;词间距离：用&lt;code&gt;word-spacing: 0.5em&lt;/code&gt;（注意它影响所有词间，不只是某一处）&lt;/li&gt; &lt;li&gt;字母间距：用&lt;code&gt;letter-spacing: 1px&lt;/code&gt;（慎用，影响可读性）&lt;/li&gt; &lt;li&gt;块级元素间隔：用&lt;code&gt;margin&lt;/code&gt;或&lt;code&gt;gap&lt;/code&gt;（Flex/Grid容器内）&lt;/li&gt; &lt;li&gt;行内元素对齐：用&lt;code&gt;vertical-align&lt;/code&gt;配合&lt;code&gt;line-height&lt;/code&gt;，而不是塞&lt;code&gt; &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;，会破坏常规排版流。直接套在普通段落外，常导致文字变小、行高异常、响应式失效。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;只在明确需要保留格式的场景用：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;...&lt;/code&gt;</pre>（代码块）、ASCII艺术、固定列宽数据
• 如果只是想让一段文本内的空格生效，改用white-space: pre-wrap更安全——它保留空格和换行，但允许自动换行
• 别嵌套<pre class="brush:php;toolbar:false;"></pre>：浏览器对多重white-space处理不一致，容易出意料之外的缩进

实际写页面时，90%的“空格需求”背后是布局或文本样式问题。先想清楚要的是“视觉间距”还是“文本结构”，再选工具。拿不准就打开开发者工具，看是该调CSS属性，还是真得插一个 。