空隙源于html解析器将换行/空格转为#text节点，宽度=父元素font-size×0.25em；margin:0无效，需用font-size:0+子元素重置字号或display:flex+gap解决。
行内标签（inline 或 inline-block）之间的空隙不是 CSS 没写对，而是 HTML 解析器把换行符和空格当成了真实文本节点——它有宽度，且默认约 4px。
为什么 margin: 0 压不住那个 4px 空隙
这个空隙本质是父容器里一个看不见的 #text 节点，内容就是一个空格。它的宽度 = 父元素当前 font-size × 0.25em。所以即使子元素设了 margin: 0、vertical-align: top，只要父容器有字号，空格就占地方。
常见错误现象包括：<button></button> 和 <input> 并排时中间漏白、导航菜单项错位、图片栅格横向对不齐；开发者工具 Elements 面板里能看到两个元素之间夹着 #text 节点。
- 只给子元素设
font-size: 0没用——空隙由父级字号决定 -
display: flex容器下完全不产生该空隙，因为文本节点不参与 flex 排列 - HTML 注释
<!-- -->插在标签之间也能“吃掉”换行，但容易漏写或格式混乱
font-size: 0 在父容器上生效的实操要点
这是兼容性最好、见效最快的现场解法，但必须配对使用，否则文字全消失。
- 父容器加
font-size: 0（如.control-group { font-size: 0; }） - 每个直系子元素必须显式恢复字号，例如
button, input { font-size: 16px; } - 若子元素含
<select></select>或<textarea></textarea>，它们可能继承异常，需单独指定font-size - 避免在深层嵌套中依赖
em单位，因为font-size: 0会让1.2em变成 0px
动态插入 HTML 时怎么避免间隙
用 .html() 插入字符串，间隙是否出现，取决于你传进去的字符串本身有没有换行和空格。
- ✅ 正确：用 ES6 模板字符串连写，无换行无空格：
`<button>-</button><input type="number" value="1"><button>+</button>` - ❌ 错误：用
+=多次拼接，或模板字符串里换行缩进，会把空白带进 DOM - ⚠️ 注意：
$().appendTo()的行为受 jQuery 版本影响，不如.html()可控，不推荐用于间隙敏感场景
现代项目首选 display: flex 的理由
它从布局模型层面绕过问题，间隙天然不存在，还能用 gap 精确控制间距。
- 只需父容器加
display: flex，子元素无需改display值（inline-block会自动被覆盖） -
gap支持响应式单位（如gap: 0.5rem），比硬调margin更干净 - IE11 不支持
gap，但display: flex本身 IE10+ 全支持；如需兼容 IE11，可 fallback 到font-size: 0 - 伪元素（
::before/::after）或 HTML 注释如果生成了文本节点，仍可能在 flex 容器外造成干扰——这点常被忽略
真正麻烦的不是选哪种方案，而是混用：比如父容器用了 font-size: 0，子元素又用 em 写 padding，或者 flex 容器里塞了个未重置 font-size 的 <span></span>，空隙就悄悄回来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
