HTML中连续空格被浏览器默认合并为一个，需用white-space属性（如pre-wrap）或margin/padding等CSS属性精确控制间距，空格仅适用于防断行、占位等少数语义场景。

HTML里连续空格被合并是默认行为

浏览器会把 HTML 源码中多个连续的   或普通空格字符压缩成一个，这是 HTML 规范定义的“空白符折叠”机制。所以直接敲多个空格键、或写多个   在多数场景下并不能稳定撑开固定间隙——尤其在响应式布局或字体变化时容易失效。

用 white-space CSS 属性控制空白处理

真正可控的方式是改写元素的空白符渲染规则：

• white-space: pre：保留所有空格和换行，但不自动换行（类似 <pre class="brush:php;toolbar:false;">&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;/ul&gt; &lt;p&gt;例如：&lt;pre class='brush:php;toolbar:false;'&gt;&lt;span style=&quot;white-space: pre-wrap&quot;&gt; 这里两个空格 &lt;/span&gt;</pre> —— 两端的两个空格会被真实渲染，且内容仍可折行。 <h3>更推荐用 <code>margin 或 padding 控制间隙

  用空格“模拟”间距本质是语义错位，实际开发中应优先用盒模型属性：

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

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  • 相邻元素间固定间隙：用 margin-right 或 margin-bottom
  • 文本内需对齐（如表格感排版）：改用 display: inline-block + 宽度 + text-align
  • 需要像素级精确：避免依赖空格数量，直接设 margin: 0 8px 这类明确值

  比如两个按钮之间要 12px 间隙：

  <button style="margin-right: 12px">A</button><button>B</button>

    只在极少数语义场景下必要

  它真正的用途不是“做间隙”，而是“防止换行”或“占位”：

  • 防止单词被断行：<span>C++ Developer</span>
  • 空单元格显示（表格中避免塌陷）：<td> </td>
  • 纯文本环境（如邮件模板）中模拟缩进

  一旦你发现要连写三个以上   才“看起来对”，就该停下来检查是否该用 CSS 了——空格不是尺子，margin 才是。