优先用display: flex + gap，次选font-size: 0 + 子元素重设字号；inline-block间隙源于html换行/空格被解析为u+0020文本节点，在ifc中渲染为≈父font-size×0.25em的空白。
直接结论：优先用 display: flex + gap，次选 font-size: 0 + 子元素重设字号；别碰负 margin、删换行、注释隔开这些“省事但埋雷”的做法。
为什么 inline-block 元素之间总有 4px 左右的空白？
这不是你写错了 margin 或 padding，而是浏览器把 HTML 源码里的换行符、空格、制表符当作文本节点（U+0020）渲染了。它属于行内格式化上下文（IFC）的正常行为，宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。只要两个 display: inline-block 元素在源码里不在同一行，这个空隙就存在。
常见错误现象包括：横向排列的按钮/菜单项总比预期宽、开发者工具里看到元素间有不可删除的空白、加了 margin: 0 也没用。
用 font-size: 0 消除间隙但必须重置子元素字号
这是兼容性最好（IE8+）、语义清晰的方案，但容易因遗漏重置导致文字消失或布局错乱：
-
font-size: 0必须设在直接包裹inline-block子项的父容器上；套多一层div却没设，无效 - 所有子元素会继承
font-size: 0，所以每个含文本的子元素必须显式声明font-size（如16px或1rem），不能只写inherit - 若子元素用了
em单位（如line-height: 1.5或width: 20em），计算结果为 0，需改用无单位数值（line-height: 1.5）或px/rem -
<img>虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目更推荐用 display: flex + gap
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：
- 父容器必须显式声明：
display: flex、flex-wrap: nowrap、gap: 0（部分旧版 Safari 对gap支持不稳定，不写易出问题） - 子元素原来设的
display: inline-block得手动重置为display: block或干脆不设，由 flex 自动接管 - 已有
margin的子元素，间隙是它自己撑出来的，不是布局导致的——得查 CSS 优先级，看是不是某个规则没被覆盖 - Safari ≤ 14.0 不支持
gap，但不影响间隙消除本身；IE 完全不支持flex，需另寻方案
哪些做法看似有效但实际不推荐
以下方法在真实项目中容易埋坑：
- 手删 HTML 源码换行和空格：牺牲可读性，格式化工具一运行就还原
- 用注释隔开（
<!-- -->）：代码臃肿，协作维护成本高 - 负
margin（如margin-left: -4px）：缝隙宽度随font-size变化，媒体查询里改字号就得同步调；Chrome/Safari 渲染差异还可能导致 1px 偏差 - 对
或全局容器设font-size: 0：极易遗漏恢复，整页文字消失
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用 font-size: 0，一边又加 transform: scale(0.99) 或 letter-spacing: -0.31em 补丁——这些补丁本身就会触发新的渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
