HTML中连续空白符会被折叠为单个空格且仅影响inline文本；元素间距须用CSS的margin或gap，禁用空格布局；文本内对齐可用 、 、 、 等实体。
半角空格在HTML里根本不起布局作用
直接敲空格键、写多个普通空格，浏览器一律压缩成一个不可见的“文本内空格”，且只对 inline 文本节点生效。它既不能撑开 div 间距，也不能让两个 button 分开——哪怕你连敲二十下空格，渲染结果还是紧贴着的。这不是 bug，是 HTML 解析器的默认行为：所有连续空白符（空格、换行、制表符）都会被折叠为单个空格字符，且仅在行内流中参与排版。
想用空格“微调”文字对齐？用 或窄空格实体
仅当目标是**文本内部的视觉对齐**（比如中文标题缩进、单位与数字之间加空隙、防止“100%”被断行），才考虑实体空格：
-
-
-
-
注意： 在 white-space: nowrap 下仍保留，但在 pre-wrap 中和普通空格无异；误用 white-space: nowrap 可能导致图标+文字粘连（如 <i class="icon"></i> 下载 变成“下载”）。
元素级间隙必须用 CSS，margin 和 gap 是首选
两个按钮、输入框、卡片之间的距离，从来不是空格的事。常见错误是给 span 或 inline-block 元素之间敲空格，结果出现约 4px 的诡异间隙（由父容器 font-size 决定），这其实是 HTML 解析把换行当成了文本节点所致。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 对 Flex 容器：直接用
gap: 8px，天然无视源码空白，子元素间距均匀可控 - 对普通块级兄弟元素：用
margin-left或margin-right，推荐简写margin: 0 12px - 对 inline 元素（如
span）需加margin：先设display: inline-block，否则 margin 大概率无效 - 表格单元格内边距：用
td, th { padding: 6px 10px }，别碰已废弃的cellpadding
动态插入 HTML 时空白间隙更小？这是解析差异，不是空格变少了
jQuery 的 .html() 或原生 innerHTML 拼接字符串时若没写换行，就不会生成空白文本节点，所以按钮之间没那 4px 缝；静态 HTML 里换行缩进却会触发该机制。这不是“空格少了”，而是解析器压根没看到空白节点。
- 统一方案一：静态 HTML 也写成单行，如
<button>−</button><input><button>+</button> - 统一方案二：容器设
font-size: 0，子元素再设回正常字号 +display: inline-block - 避免方案：用
<pre class="brush:php;toolbar:false;"></pre>包裹——它强制等宽、破坏语义、无法响应式，纯属误用
真正难处理的，是既要保持源码可读性，又要消除 inline-block 间隙的场景；这时 gap 和 font-size: 0 组合比硬塞 可靠得多。
