HTML元素间4px间隙源于浏览器将换行/缩进解析为文本节点并渲染为空格；动态插入无间隙因字符串无空白，静态HTML则必然触发；font-size:0+子元素重置字号是最轻量兼容方案。
HTML 元素间“莫名其妙”的间隙，不是 CSS 没写对，也不是 margin 算错了——它大概率是浏览器把换行符和缩进当成了真实空格在渲染。这类问题在静态 HTML 和动态插入混用时尤其隐蔽，DevTools 里 DOM 结构一模一样，但视觉就是不对。
为什么 display: inline-block 元素间总有 4px 间隙
根本原因是 HTML 解析器对空白字符的处理规则：当两个 <button></button>、<input> 或 <span></span> 这类默认 inline 或 inline-block 的元素之间存在换行或空格（哪怕只是缩进），浏览器会把那段空白解析成一个文本节点，并渲染为约一个空格宽度（通常 ~4px）。
这个间隙不响应 margin 调整，也不受 padding 影响，检查 computed styles 也看不到来源——它藏在 DOM 树里，但不在样式面板中。
- 动态插入（如
$("#box").html("<button>-</button><input><button>+</button>")）没间隙，是因为字符串里没换行/空格，压根没生成那个文本节点 - 静态 HTML 中写成多行 + 缩进，就必然触发该行为
-
font-size: 0在父容器上能直接“关掉”这个文本节点的渲染高度，是最轻量、兼容性最好的干预点
用 DevTools 快速定位间隙是否来自空白字符
别先改 CSS，先确认问题根源。打开 Elements 面板，找到疑似有间隙的容器，在 DOM 树中逐级展开子节点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 如果看到两个标签之间夹着一个只含
\n或 - 右键点击该
#text节点 →Delete node，页面立刻变紧凑，说明判断正确 - 注意：这个节点在
display: flex或display: grid容器里不会出现，因为 flex/grid 会忽略空白文本节点
这一步比瞎调 vertical-align 或 letter-spacing 有效十倍。
font-size: 0 方案的实际坑点与绕过方式
设 font-size: 0 确实能灭掉间隙，但它会影响所有后代文本，包括 <input type="number"> 的 placeholder、<button></button> 的文字、甚至 SVG 内的 <text></text>。不能简单“设了就完事”。
- 必须配合子元素显式重置字体大小：
.container > * { font-size: 16px; } - 如果子元素是嵌套结构（比如按钮里有
<span></span>），要用.container > *:not(span) { font-size: 16px; }或更精确的选择器，避免层层覆盖 -
vertical-align: middle建议同步加，否则inline-block元素因基线对齐仍可能错位 - 慎用
font-size: 0在表单容器上——某些旧版 Safari 对input::placeholder的继承行为异常，可改用white-space: nowrap+margin组合替代
自动化压缩工具对间隙的影响要手动验证
像 html-minifier-terser 开启 collapseWhitespace: true 后，确实会删掉源码中的换行和空格，从而从源头消灭间隙。但这不是万能解药：
- 若你依赖
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>或white-space: pre-wrap的内容格式，必须配preserveLineBreaks: true，否则压缩会破坏语义 - Webpack 的
html-webpack-pluginv5+ 不接受minify: true，必须传对象，否则压缩形同虚设 - 本地调试时，用
curl -s http://localhost:8080/index.html | grep -o "button><input> 直接查标签是否连写，比看文件大小更可靠
最易被忽略的是：压缩只作用于构建时的 HTML 输出，不影响你在 DevTools 里手动生成的 DOM（比如用 innerHTML 插入的字符串）。动态逻辑里的空白，得靠 JS 层面拼接控制，工具管不到。
