布局间隙必须用CSS的margin、padding或gap控制；文本内需多个可见空格才用或white-space。inline-block元素间4px间隙源于源码换行生成空格节点，可用font-size:0临时消除或改用flex+gap彻底解决。
HTML里敲空格、换行、缩进，浏览器几乎全当没看见——这不是你代码写错了，是HTML解析器本就该这么干。布局间隙必须用margin、padding或gap控制；文本内需要“多个可见空格”才轮到 或white-space出场。
inline-block元素间凭空多出4px怎么消失
这是管理系统高频踩坑点：源码里<button></button>和<button></button>之间换了一行，浏览器就生成一个空格文本节点，渲染成约4px间隙（由父容器font-size决定）。
- 最稳的现场处理：
parent { font-size: 0; }+ 子元素单独设font-size（不设文字就看不见） - 长期推荐方案：改用
display: flex，配gap: 8px——它天然忽略源码空白，且支持gap: 12px 8px分别控行列间距 - 临时绕过写法：把标签写成紧挨着
<button></button><button></button>，或用注释吃掉空白<button></button><!-- --><button></button>，但可读性差
中英文混排时标点粘连、空格塌陷怎么办
HTML默认把连续空白符（含中文全角空格、英文半角空格、换行）合并成一个空格，导致「今天天气很好。Hello world.」这种错位粘连。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要全局设
white-space: pre-wrap，那会破坏段落换行逻辑 - 关键在分层控制：包裹混排文本的容器保持
white-space: normal（默认值），只在需对齐/缩进处用 - 中文标点必须用全角字符（“”、，、。），英文单词前后用
什么时候非用 或white-space不可
仅限文本流内部需要“视觉上多个空格”的场景，比如对齐中文标题、模拟首行缩进、防止词组被断开。
立即学习“前端免费学习笔记（深入）”；
-
-
-
white-space: pre-wrap：整段保留空格+允许自动换行，比<pre class="brush:php;toolbar:false;"></pre>可控，且不强制等宽字体 - 慎用
white-space: nowrap：它会吞掉所有中间空格，图标+文字若靠空格分隔，可能直接粘成一块
最容易被忽略的一点：空格问题从来不是“怎么多打几个空格”，而是得先分清——这是布局层级的间隔，还是文本流内的视觉空格。混用margin和 ，或者给按钮容器加white-space: pre，只会让问题更难定位。
