图标与文字间出现间隙是因inline元素受font-size、行高影响且HTML空格被解析为4px空格；推荐用margin控制间距，配合vertical-align对齐基线，或用flex+gap一劳永逸。
为什么图标和文字之间总多出几像素间隙
因为绝大多数图标是 <i></i>、<span></span> 或 SVG 元素，默认为 inline 元素，会受父容器 font-size 和行高影响；源码中换行或空格会被解析成一个真实空格字符（约 4px 宽），而浏览器又不会把它“吃掉”——这导致图标和文字间总有一道不可控的缝隙。
用 margin 直接控制最稳妥
别依赖 HTML 空格或 word-spacing，它们对图标无效。给图标元素加 margin-right（或文字加 margin-left）才是可控方案：
- 若图标在前、文字在后：
<i class="icon-user"></i><span>用户中心</span>→ 对.icon-user设margin-right: 8px - 若文字在前、图标在后：
<span>下载</span><i class="icon-download"></i>→ 对.icon-download设margin-left: 6px - 避免用
margin的负值强行“吸”紧，小字号下易触发渲染错位（尤其 Safari iOS）
vertical-align 不配 margin 很难调准
图标和文字基线不一致时，仅靠 margin 会发现上下位置偏移，视觉上“没对齐”。必须配合 vertical-align：
- 常用值：
vertical-align: middle（适合中等尺寸图标）、vertical-align: -0.125em（更精细，适配 Font Awesome 类图标） - 切忌用
vertical-align: baseline—— 这是默认值，也是间隙最“飘忽”的根源 - 如果图标是 SVG，建议统一设
vertical-align: -0.15em+margin-right: 6px，90% 场景能对齐
用 flex 容器一劳永逸但有前提
把图标和文字包进 display: flex 容器里，间隙就完全脱离文本流干扰：
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<div class="icon-text"> <i></i><span>设置</span> </div>，CSS 中设.icon-text { display: flex; align-items: center; gap: 8px; } -
gap比手动margin更干净，不污染子元素样式，且无视源码换行 - 注意：老版本 Android WebView（≤4.4）不支持
gap，需降级为margin并加@supports判断
最容易被忽略的是：图标字体（如 IconFont）本身带内边距，某些图标在不同字体下实际宽度不一致，所以固定 margin 值不如用 gap + flex 配合 align-items: center 来得稳定。如果必须兼容极旧环境，优先测 vertical-align: -0.125em 而非盲目调 margin。
