inline-block列表项间有4px空白，是HTML解析器将标签间换行/空格渲染为空格字符所致，宽度≈父容器font-size的0.25em；可用font-size:0+子元素重置字号解决，或现代项目优先采用display:flex+gap布局。
为什么 inline-block 列表项之间总有 4px 左右的空白？
这不是你写错了 margin 或 padding，而是 HTML 解析器把 标签之间的换行符、空格当作文本节点渲染了——它本质是一个「空格字符」，宽度 ≈ 父容器 font-size 的 0.25em（比如父级 font-size: 16px，间隙就是约 4px）。只要源码里 不在同一行，这个间隙就必然存在。
用 font-size: 0 是最兼容的解法，但必须满足三个条件
这个方案支持 IE8+，但漏掉任一条件就会让文字消失或布局错乱：
-
font-size: 0必须设在直接包裹的父容器上（比如.nav或ul），套多一层div却没设，无效 - 每个含文本的
必须显式声明font-size（如14px或1rem），不能只写inherit - 如果
内用了em单位（比如line-height: 1.5或padding: 0.5em），计算结果会归零；应改用无单位数值（line-height: 1.5）或px/rem
现代项目优先用 display: flex + gap 替代 inline-block
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，直接放弃 inline-block：
-
display: flex天然忽略 HTML 空白文本节点，无需删换行、加注释或调font-size -
gap精确控制间距，不随字号变化，媒体查询里改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 补丁——补丁本身会触发新的渲染异常，而且无法通过自动化测试覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
