inline-block元素间间隙源于html解析器将换行符、空格等视为空格字符渲染，宽约父容器font-size的0.25em；消除方案中font-size:0+子元素重设字号兼容性好但需谨慎处理继承，现代项目更推荐flex+gap。
为什么 inline-block 元素之间会有间隙
这不是 margin 或 padding 漏写了，而是 HTML 解析器把换行符、空格、制表符当作文本节点渲染出来的一个「空格字符」。它的宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。只要两个 display: inline-block 元素在源码里不在同一行，这个间隙就存在。
它只影响 inline 和 inline-block 元素；display: block 或 flex 完全不受影响。
用 font-size: 0 消除间隙但必须重设子元素字号
这是兼容性最好（IE8+）、语义清晰的方案，但漏一步就会出问题：
-
font-size: 0必须写在直接包裹 inline-block 子元素的父容器上。套多一层div却没设，间隙照旧 - 所有含文本的子元素必须显式声明
font-size（如16px或1rem），不能只写inherit—— 因为父级已经是 0，继承后就是 0 - 若子元素用了
em单位（如line-height: 1.5或margin: 0.5em），结果会归零，需改用无单位数值（line-height: 1.5）或px/rem -
<img>虽无文字，旧版 Safari 中仍可能异常，建议统一加font-size: 16px - 千万别对
body或全局容器设font-size: 0，极易遗漏恢复，整页文字直接不可见
现代项目更推荐用 display: flex + gap
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是根治方案：
-
gap精确控制间距，不依赖 HTML 源码结构，删换行/加注释都无需操心 - 天然忽略空白文本节点，不用处理继承、不用计算
calc(33.333% - 5.333px) - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级
哪些做法看似有效但实际不推荐
以下方法在真实项目中容易埋坑：
- 手删 HTML 源码换行和空格：牺牲可读性，格式化工具一运行就还原
- 用注释隔开（
<!-- -->）：代码臃肿，协作维护成本高 - 负
margin（如margin-left: -4px）：缝隙宽度随font-size变化，媒体查询里改字号就得同步调；Chrome/Safari 渲染差异还可能导致 1px 偏差 - 叠加
letter-spacing: -0.31em补丁：会让图片模糊、文字挤叠
真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用 font-size: 0，一边又加 transform: scale(0.99) 或 letter-spacing 补丁——这些补丁本身就会触发新的渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
