inline-block元素间2–4px间隙不是bug，是html解析器将换行符、空格等空白符解析为文本节点所致，其宽度=父容器font-size的0.25em；font-size:0可消除间隙，但须作用于直接包裹子元素的父容器，并需子元素显式重设字体大小。
为什么 inline-block 元素间总有 2–4px 间隙
这不是 bug，是 HTML 解析器把换行符、空格、制表符当成文本节点渲染的结果。这个“看不见的空格”有宽度，宽度 = 父容器 font-size 的 0.25em（比如父级 font-size: 16px，间隙 ≈ 4px）。只要父容器有非零 font-size，且子元素是 inline 或 inline-block，间隙就存在——旧版安卓 WebView、iOS Safari、Chrome 全都一样。
font-size: 0 为什么能消除间隙
把父容器 font-size 设为 0，等于让那个“空白文本节点”的字体大小归零，它就失去渲染宽度，间隙自然塌缩。但关键点在于：这个归零必须作用在**直接包裹 inline-block 子元素的父容器**上，而不是随便套个外层 div 就完事。
- ✅ 正确：
.icon-group { font-size: 0; }→.icon-group > i { display: inline-block; font-size: 18px; } - ❌ 错误：
.wrapper { font-size: 0; }，但.icon-group是它的子元素，而i在.icon-group内 —— 间隙还在，因为空白节点在.icon-group内部生成 - ⚠️ 注意：
font-size: 0会同时让line-height计算值变为 0，如果父容器设了height或vertical-align，可能引发垂直错位
为什么加了 font-size: 0 文字却消失了
因为 font-size 是可继承属性，子元素没重设就会继承 0。这不是失效，是预期行为。
- 每个
inline-block子元素必须显式声明font-size，比如font-size: 14px或font-size: 1rem - 如果子元素内还有嵌套文字（如
<a><span>文字</span></a>），span也会继承父a的字号 —— 所以要么让a恢复字号，要么确保span自己设 - 用
em单位时要格外小心：.item { font-size: 1.2em; }在font-size: 0父容器下会计算为 0，推荐优先用px或rem（基于根字体）
移动端特别要注意的兼容细节
旧版安卓（4.4 及更早）WebView 对空白字符的处理更粗暴，会生成固定约 4px 高的不可见行框；font-size: 0 在这里依然有效，但副作用更明显。
- 某些定制 ROM（如早期华为 EMUI）即使在 Android 5.0+ 仍残留类似行为，别急着移除该规则
- 若父容器本身含真实文字（比如标题 + 图标组混排），不能直接设
font-size: 0—— 要么用结构隔离（额外包一层div），要么改用注释法：<i></i><!-- --><i></i> -
vertical-align: baseline默认值在图片+文字混排时极易导致底部悬空，统一设成vertical-align: top或middle更稳
真正麻烦的不是怎么写 font-size: 0，而是当父容器同时承担内容展示和布局控制双重角色时，你得判断：这个“归零”会不会意外干掉其他本该显示的文字、影响 line-height 基准、或者让 em-驱动的响应式尺寸集体失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
