inline-block元素间4px间隙源于HTML解析器将换行/空格转为文本节点，宽度≈父容器font-size×0.25；最稳解法是父容器设font-size:0并显式重置子元素字号，或改用display:flex+gap。
HTML 中的空格占位（换行、缩进、空格）本身不是 bug，而是浏览器按规范解析的结果；真正要处理的，是它在 inline 或 inline-block 元素间渲染出的约 4px 间隙——这不是 CSS margin，不能靠 margin: 0 直接清掉。
为什么 inline-block 元素间总多出 4px 间隙
浏览器把 HTML 源码里标签之间的换行符、缩进空格，当作一个文本节点（只含空白字符），并按父容器当前 font-size 渲染成一个“空格字符”。这个空格宽度 ≈ font-size × 0.25（典型值就是 4px）。只要父容器没设 font-size: 0，且子元素是 inline-block（比如 button、input[type="number"]、li 默认 display），就一定会出现。
常见错误现象：
- 静态 HTML 写成多行，按钮和输入框之间有缝隙；但用
$().html()动态插入同一串 HTML 却没缝（因为字符串里没换行） - 加了
margin-left: -4px临时压住，但换字体或缩放后又错位 - 只重置
ul的margin，却没意识到间隙来自li间的空白文本节点
font-size: 0 在父容器上生效但子元素文字消失了
这是最常踩的坑：设了 font-size: 0 是为了让空白字符“不可见”，但它会继承给所有子元素。如果子元素没显式恢复 font-size，文字、placeholder、甚至 input 的光标位置都会异常。
立即学习“前端免费学习笔记（深入）”；
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器必须设
font-size: 0，且仅作用于布局容器（如.inline-group），不要污染全局 - 子元素必须显式写
font-size: 16px（或你项目实际字号），不能依赖继承 - 对
input、textarea等表单控件，额外确认其placeholder是否仍可见（某些旧版 Safari 需加::placeholder { font-size: 16px; }） - 避免在富文本容器（如
div.content）上滥用，否则段落文字会集体消失
动态拼接 HTML 时怎么避免引入空白
用 jQuery 的 .html() 或原生 innerHTML 插入时，字符串里哪怕只有一个换行或空格，就会触发空白渲染。ES6 模板字符串（反引号）容易误带缩进，比 + 拼接更隐蔽。
安全写法：
- 用单行模板字符串：
el.innerHTML = `<button>-</button><input type="number" value="1"><button>+</button>`; - 不用模板字符串时，用数组
join('')拼接，确保无隐式换行：['<button>', '-', '</button>', '<input type="number" value="1">', '<button>', '+', '</button>'].join('') - 如果必须保留可读性，用正则预处理：
htmlStr.replace(/>\s+, '>（只删标签间的空白，不碰属性值里的空格）
用 flex 替代 inline-block 布局时还用管空格吗
不用。Flex 容器（display: flex）完全绕过 HTML 空白字符的渲染逻辑——子元素间的换行、空格、缩进，在 Flex 布局下不会生成任何文本节点，自然没有间隙。
但要注意：
-
flex不是万能 fallback：IE10/11 对flex-wrap、gap支持弱，若需兼容得加 polyfill 或回退方案 - 别在已有浮动（
float）结构上硬套flex，两者混用会导致布局断裂 -
gap属性虽方便，但在 Safari 14.1 之前不支持，老项目中仍需用margin模拟
真正难的不是选哪种方案，而是看懂开发者工具里那个看不见的“#text”节点——它就在两个 button 中间，内容是换行符，type 是 3。找到它，问题就解决了一半。
