HTML元素间空隙是规范行为，源于inline/inline-block元素源码换行产生的空格文本节点；font-size:0可消除该间隙，flex+gap则是现代语义化替代方案。
HTML 元素间的“空格间隙”不是 bug，是规范行为；它只对 inline 和 inline-block 元素生效，且完全由源码中的换行/缩进触发——块级元素之间换行不会产生间隙。
为什么 button 和 input 之间总有 4px 空隙
因为 button 默认是 inline-block，input 默认是 inline，它们同属行内格式化上下文。当 HTML 源码写成多行时：
<button>-</button><input type="number" value="1"><button>+</button>
换行符会被解析为一个文本节点，内容就是一个空格；这个空格的宽度 ≈ 当前父容器 font-size 的 0.25 倍（比如 font-size: 16px → 空隙约 4px）。
常见错误现象：开发者工具里看 DOM 是干净的，但视觉上就是多了一道缝；用 margin-left: -4px 硬调？治标不治本，换字体或缩放就失效。
立即学习“前端免费学习笔记（深入）”；
font-size: 0 是最稳的消除方案
它不改结构、不依赖 JS、兼容 IE11+，原理是让那个“空格字符”失去渲染宽度，而子元素自己重设 font-size 后文字照常显示。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给父容器加
font-size: 0（比如<div class="btn-group">） <li>所有直系子元素（<code>button、input、span等）显式设置font-size，如14px或1rem - 可顺手加
vertical-align: middle避免基线对齐错位 -
input[type="number"]的placeholder不受影响，无需额外 hack - 父容器设
display: flex和gap: 8px（单位支持px、em、rem） - 子元素无需任何
margin，gap自动作用于相邻项之间 - Safari 14.1+、Chrome 89+、Firefox 63+ 均已稳定支持
- 若需兼容 Safari ≤14，可用
justify-content: space-between+ 单独控制首尾margin - ✅ 正确写法：
`<button>-</button><input type="number" value="1"><button>+</button>`（紧凑连写） - ❌ 错误写法：
`<button>-</button>\n<input type="number" value="1">\n<button>+</button>`（\n就是间隙来源） - jQuery 的
$().appendTo()行为不稳定，不同版本对空白处理不一致，优先用.html()+ 紧凑字符串
别对 或 设 font-size: 0，否则全局文字消失。
Flex + gap 是语义更清晰的现代替代
如果你能放弃 IE，display: flex 配合 gap 是真正绕过空白解析问题的解法——它根本不读源码里的换行，间隙由 CSS 控制，响应友好，首尾无多余留白。
注意：gap 对 grid 同样有效，但对普通 inline 流无效，必须用 flex 或 grid 容器。
动态插入时字符串不能含换行
用 element.innerHTML = '...' 或 jQuery 的 .html() 插入时，如果模板字符串里有 \n 或缩进，照样生成空格文本节点——浏览器照常解析那段 HTML 字符串。
最容易被忽略的一点：这个问题从来不是“怎么让空格变大”，而是“怎么让浏览器别把换行当空格”。只要记住源码空白只影响 inline 级元素，其他都是干扰项。
