inline-block元素间4px间隙源于HTML解析器将换行符、空格等空白符解析为文本节点，其宽度≈父容器font-size的0.25em；可用font-size:0+子元素重置字号、HTML注释法或display:flex解决。
inline-block 元素间 4px 间隙是怎么来的
这不是 CSS 写错了，也不是浏览器 bug。HTML 解析器把源码里的换行符 \n、空格、制表符 \t 当作文本节点处理；当父容器内子元素是 display: inline-block（比如 <button></button>、<input>、<span></span>）时，这个“空白文本节点”会被渲染成一个真实存在的空格，宽度 ≈ 0.25em（在 font-size: 16px 下就是约 4px）。开发者工具里看不到 margin，但盒模型上确实多出一段不可控间距。
动态插入 HTML 时怎么避免生成空白节点
用 jQuery 或原生 innerHTML 动态写入时，如果字符串里含换行或空格，照样会触发解析规则——哪怕你没手动敲空格，模板字符串里的缩进和回车也会被当成空白。
- ✅ 正确写法：用 ES6 模板字符串连写，中间**不换行、不留空格**：
$("#dynamic").html(`<button>-</button><input type="number" value="1"><button>+</button>`); - ❌ 错误写法：用
+=拼多行字符串，或在反引号内换行：`<button>-</button>\n<input ...>`—— 这些\n会被保留并解析 - 注意：Vue/React 等框架的模板编译通常已自动 strip 掉空白，但 SSR 输出若未配置
collapseWhitespace，仍可能带出间隙
静态 HTML 里怎么安全地保留可读性又消除间隙
不能为了去间隙就把所有标签压成一行——维护成本太高。有三种现场可用、兼容性好、不改逻辑的方案：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
HTML 注释法：在标签间插入紧贴的注释，物理“吃掉”空白 ——
<div class="item">1</div> <!-- --><div class="item">2</div>。注释前后不能有空格，否则空格还在 -
font-size: 0法：父容器设font-size: 0，让空格失去宽度；再给每个子元素显式恢复字号，如.nav a { font-size: 16px; }。注意<input>、<select></select>可能继承异常，需单独指定 -
Flex 替代法：直接把父容器改成
display: flex，间隙天然消失，且支持gap精确控制间距。IE10+ 支持，若必须兼容 IE9，就别选它
为什么不要用 letter-spacing: -4px 或负 margin
这类“打补丁”方式看似简单，但实际埋坑：
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing: -4px会影响所有子文字的字距，中英文混排时易错位，且 Safari 和旧 Android 浏览器兼容性差 - 负
margin（如margin-right: -4px）依赖固定像素值，一旦父容器font-size变化，间隙又回来；还可能引发子元素重叠或截断 - 两者都会干扰屏幕阅读器对文本流的判断，降低可访问性
真正要稳，就得从空白节点是否生成、是否渲染这两个环节下手。动态拼接时盯紧字符串内容，静态写法优先用注释或 font-size: 0，长期项目直接切 flex —— 别在“怎么压住那个空格”上反复调参。
