文本空格与布局间隙需分层处理：white-space: pre-wrap 保留文本空格并支持折行；布局间隙用 font-size: 0（配子元素字号）或 flex + gap 解决，二者机制独立不可混用。
不能靠敲空格实现“既保留文本内空格，又消除元素间间隙”——这是两个独立问题，必须分层处理：文本空格用 white-space 控制，布局间隙用 display 模型和 gap 或 font-size: 0 解决。
white-space: pre-wrap 是保留文本空格最安全的选择
它比 pre 更实用：保留所有空格和换行，同时允许自动折行，不强制等宽字体，语义也更干净。
-
white-space: pre会禁用折行，长文本容易撑破容器；pre-wrap则只在必要时才换行 - 对从
textarea或 API 动态读入的带缩进/换行的文本，直接设white-space: pre-wrap就行，不用手动.replace(/ /g, ' ') - 注意：如果父容器用了
font-size: 0（见下一条），得给子文本元素显式恢复字号，否则文字不可见
inline-block 元素间隙必须用 font-size: 0 或 flex 解决
源码里写换行或空格，浏览器会把它们解析成一个文本节点，宽度 ≈ 父容器 font-size 的 1/4（约 4px）。这不是 margin，清不掉。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最稳方案：给父容器设
font-size: 0，再给每个子元素单独设font-size: 16px（或继承值） - 更现代方案：改用
display: flex+gap，天然无视源码空白，且支持响应式间距 - 别用
margin-left: -4px这类 hack，font-size变化时失效，也不适配高 DPI 屏
表格、按钮组、表单控件组合要避免混用 display 类型
比如 button 和 input 默认是 inline-block，但如果你给其中一个加了 float 或 display: block，间隙行为就不可预测。
立即学习“前端免费学习笔记（深入）”；
- 统一用
display: inline-block+font-size: 0父容器，是最兼容的写法 - 表单控件如
input[type="number"]对font-size: 0支持良好，placeholder 文字不会消失（实测 Chrome/Firefox/Safari 均正常） - 若用
flex，注意input在某些旧版 Safari 中需加min-width: 0防止溢出
真正难的不是选哪个方案，而是意识到：文本空格渲染和布局间隙是两套机制。同一段 HTML 里，white-space 只影响容器内的文本流，对兄弟元素间距毫无作用；而 font-size: 0 或 flex 只管布局结构，对内部文字是否保留空格也没影响。混用时漏掉其中一层，就会出现“空格显示了但按钮还卡着”这类问题。
