inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为U+0020文本节点，宽度≈父容器font-size的0.25em；推荐font-size:0+子元素重设字号（IE8+兼容）或现代flex+gap方案。
这个“默认间距”不是 CSS 的 bug，也不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当作文本节点（U+0020）渲染出来的——它有宽度，约等于父容器 font-size 的 0.25em（比如 font-size: 16px 时就是 ~4px）。只要两个 display: inline-block 元素在源码里不在同一行，这个间隙就必然存在。
为什么 font-size: 0 是最稳的解法，但总出错？
给直接包裹子元素的父容器设 font-size: 0，能让那个“看不见的空格字符”失去排版依据，从而视觉上消失。但它会继承，所以必须重置子元素字号，否则文字直接不可见或布局崩掉：
-
font-size: 0必须加在**直接父容器**上（比如.nav、.icon-group），套多一层div却没设，完全无效 - 每个含文本的子元素（
、、、甚至伪元素::before）都得显式写font-size: 14px（不能只写inherit） - 如果子元素用了
em单位（如line-height: 1.5、margin: 0.5em），计算结果会归零；应改用无单位数值（line-height: 1.5）或px/rem -
font-size: 16px
现代项目该直接用 flex + gap 吗？
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+（截至 2026 年底已覆盖绝大多数真实用户），display: flex + gap 是更干净、可维护性更高的方案：
-
gap直接控制间距（如gap: 8px），不依赖font-size，媒体查询里改字号也不用同步调 margin - 天然忽略 HTML 中的空白文本节点，无需删换行、加注释、调
font-size - 不用操心
vertical-align对齐问题，也避免了字体继承污染 - IE10–11 不支持
gap，可用margin-right: 8px :not(:last-child)降级（注意：别用margin-left，否则 RTL 布局会翻车）
哪些“看起来能用”的方法实际容易翻车？
这些做法在真实协作项目中埋坑最多，尤其当 legacy 代码还没重构完时：
- 手删 HTML 源码换行和空格：牺牲可读性，Prettier 一跑就还原，团队协作极易被覆盖
- 全局设
font-size: 0（比如加在body上）：整页文字瞬间不可见，且极难排查 - 叠加
letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染异常，屏幕阅读器仍按原始 HTML 结构解析，可访问性受损 - 用负
margin（如margin-right: -4px）：值随font-size和字体变化，缩放或换字体就失效；Chrome/Safari 渲染差异还可能导致 1px 偏差
真正容易被忽略的是：当有人一边用 font-size: 0，一边又加 transform: scale() 补丁——补丁本身会触发新的渲染异常，而且无法通过自动化测试覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
