inline-block元素间4px缝隙源于HTML解析器将换行/空格渲染为空格文本节点，宽度≈父容器font-size的0.25em；可用font-size:0+子元素重置字号解决，或现代项目优先采用display:flex+gap布局。
为什么 inline-block 元素之间总有一道 4px 左右的缝隙
这不是 bug，是 HTML 解析器把标签间的换行符、空格当作文本节点渲染了——它本质是一个空格字符（U+0020），宽度 ≈ 父容器 font-size 的 0.25em。比如父级设了 font-size: 16px，缝隙就是约 4px。只要两个 display: inline-block 元素在源码里不在同一行，这个缝隙就必然存在。
用 font-size: 0 消除缝隙但必须重置子元素字号
这是兼容 IE8+、语义清晰、无需改 HTML 结构的主流解法，但漏掉任一条件就会让文字消失或布局错乱：
-
font-size: 0必须设在**直接包裹**这些inline-block子项的父容器上（比如.nav或.card-list），套多一层div却没设，无效 - 所有含文本的子元素必须**显式声明**
font-size（如14px或1rem），不能只写inherit - 若子元素用了
em单位（如line-height: 1.5或padding: 0.5em），计算结果会归零；应改用无单位数值（line-height: 1.5）或px/rem -
<img>虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目优先用 display: flex + gap
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，直接放弃 inline-block：
-
display: flex天然忽略 HTML 中的空白文本节点，不用处理font-size继承问题 -
gap属性可精确控制间距（如gap: 8px），不随font-size变化，媒体查询里改字号也不用同步调margin - IE10–11 不支持
gap，可用margin-right: 8px :not(:last-child)回退
哪些“看起来能用”的方法实际容易翻车
真实协作中踩坑最多的是：
立即学习“前端免费学习笔记（深入）”；
- 手删 HTML 换行：格式化工具一跑就还原，协作时极易被覆盖
- 全局设
font-size: 0（比如加在body上）：整页文字直接不可见，且极难排查 - 叠加
letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染异常，屏幕阅读器仍按原始结构解析，可访问性受损 - legacy 代码还没重构完时，一边用
font-size: 0，一边又加负margin补丁——补丁本身会触发新的渲染异常，而且无法通过自动化测试覆盖
真正容易被忽略的是：当嵌套层级深、子元素又用了 em 做尺寸计算时，font-size: 0 的副作用不是“没效果”，而是“效果太干净”——连 line-height 和 padding 都算成 0 了。
