inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为U+0020文本节点，宽度≈父容器font-size的0.25em；根除方案首选font-size:0+子元素重设字号（IE8+兼容），或现代flex+gap布局。
inline-block 元素间 4px 间隙怎么根除
这不是 CSS 没写对，是浏览器把 HTML 源码里的换行符当成了空格文本节点，再按父容器 font-size 渲染成约 4px 宽的间隙。哪怕你写了 margin: 0、padding: 0，它也照常出现。
最稳的现场解法：font-size: 0 加子元素重置字号：
- 给父容器设
font-size: 0（注意：IE 需加-webkit-text-size-adjust: none） - 给每个 inline-block 子元素单独设回正常字号，比如
font-size: 14px - 别漏掉子元素里可能嵌套的文本、
button或input，它们继承font-size: 0就会看不见字
动态插入 HTML 时如何避免空白节点
用 .html() 或 .innerHTML 插入字符串时，只要字符串里含换行或空格，jQuery 或原生 DOM 解析后仍会生成空白文本节点——尤其是用 += 拼多行模板时，极易中招。
正确做法是确保 HTML 字符串“零空白”：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用 ES6 模板字符串（
`）但严格连写：`<button>-</button><input type="number" value="1"><button>+</button>` - 避免在标签间换行、缩进、加空格；
<button>−</button>\n<input>\n<button>+</button>就是隐患源 - 若必须分多行维护，改用注释隔断：
<button>-</button><!-- --><input><!-- --><button>+</button>
为什么 flex/gap 是更现代的替代方案
如果你控制得了布局结构，display: flex + gap 不仅能彻底绕过空白节点问题，还能免去手动计算 margin 或重置 font-size 的麻烦。
关键点：
-
gap对 flex 和 grid 容器有效，但对 inline-block 无效 -
gap: 12px会均匀作用于所有相邻子项，不依赖源码格式，也不受font-size影响 - 旧版浏览器不支持
gap？那就用margin+:not(:first-child)替代，比font-size: 0更易维护
white-space 和 到底该不该用
这两个只适用于“文本内容内部需要多个可见空格”的场景，比如对齐中文标题、保留缩进、防止图标和文字粘连。拿它们来解决布局间隙，属于误用。
常见踩坑：
-
white-space: nowrap会吞掉所有中间空格，导致<i class="icon"></i> 文本变成紧贴一块 -
-
<pre class="brush:php;toolbar:false;"></pre>强制等宽字体且破坏语义，只为“加空格”而用，得不偿失
真正该警惕的，是把“源码可读性”和“渲染结果”混为一谈——HTML 换行本身无害，有害的是它在 inline/inline-block 上下文中被当成文本节点处理。这个隐式转换，才是所有间隙问题的起点。
