inline-block元素间4px间隙源于HTML解析器将标签间空白符视作文本节点，其宽为父容器font-size的0.25em；font-size:0可消除间隙但需重置子元素字号，flex布局可彻底规避，注释法适合紧急修复。
为什么 inline-block 元素间总有 4px 间隙
这不是 CSS 写错了，也不是浏览器 bug。HTML 解析器把标签间的换行符、空格、制表符当成文本节点，内容就是一个空格；而这个空格的宽度 = 父容器当前 font-size 的 0.25em（常见为 16px 时≈4px）。只要父容器没设 display: flex 或 display: grid，且子元素是 inline 或 inline-block，这个间隙就必然出现。
font-size: 0 是最稳的现场急救法
核心逻辑：让父容器“看不见”那个空格——设 font-size: 0，空格就没了渲染宽度。但子元素文字会继承为 0，必须显式重置。
- 父容器加
font-size: 0，例如.btn-group { font-size: 0; } - 每个子元素单独恢复字号，例如
.btn-group > button, .btn-group > input { font-size: 14px; } -
<input type="number">等表单控件在部分旧版 Safari 中可能显示异常，建议加font-size: inherit显式兜底 - 该方案兼容 IE8+，不影响屏幕阅读器，也不改变 DOM 结构
用 flex 布局彻底绕过空白解析
放弃 inline-block，改用 display: flex，HTML 源码里的换行和空格直接被忽略，间隙天然消失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: flex，子元素自动水平排列，无需再写display: inline-block - 用
gap精确控制间距，比如gap: 8px，比手动调margin更干净 - IE10+ 支持，若需兼容 IE9 及更早版本，不能选此方案
- 注意：旧代码中依赖
vertical-align: middle对齐的逻辑，要改为align-items: center
HTML 注释法适合无法动 CSS 的场景
当线上页面已上线、CSS 不可修改、又急需 patch 时，用注释“吃掉”空白字符，零样式成本，立竿见影。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<button>-</button><!-- --><input type="number" value="1"><!-- --><button>+</button> - 注释必须紧贴标签，前后不能有空格，否则空格还在
- 结构略显杂乱，长期维护成本高，但兼容性极好（所有浏览器）
- 不适用于动态生成的 HTML 字符串（如
innerHTML拼接），因为注释会被 JS 当作普通字符串处理，不会参与 DOM 解析
实际项目里最容易被忽略的点是：同一套 HTML 结构，静态写法和 JS 动态插入表现不一致，并非代码问题，而是解析路径不同。静态 HTML 经过完整 HTML 解析流程，空白字符必然成文本节点；而 element.innerHTML = 'xxx' 是直接替换内容，若字符串本身无换行空格，就不会生成那些“幽灵节点”。所以最省心的统一方式，其实是——从源头掐断：所有拼接字符串，一律用模板字面量连写，不换行、不缩进、不空格。
