图标与文字间多余空格源于html将换行缩进视作空白字符，叠加基线对齐及descender空间所致；解决方法包括vertical-align调整、font-size:0抑制、或改用flex布局彻底规避。

为什么图标和文字之间总有多余空格

因为 HTML 默认把元素间的换行、缩进、空格都当作一个空白字符处理。当你写成 <img><span>文字</span> 但中间换行或加了空格，浏览器就会渲染出一个可见间隙——哪怕你没写任何  。

用 vertical-align 对齐图标和文字

图标（<img> 或 <i></i>）默认按基线（baseline）对齐，而文字的基线以下还留有 descender 空间（比如字母 g、y 的下延部分），这就导致图标“吊”在文字下方，视觉上像多了空隙。

• 给图标加 vertical-align: middle; 或 vertical-align: text-bottom;，通常能立刻收紧垂直间距
• 避免用 vertical-align: top; 或 bottom;，它们依赖父容器行高，容易在不同字体/字号下偏移
• 如果用了 inline-block 图标，vertical-align 是唯一可靠手段；flex 或 grid 则应换用布局方案

用 font-size: 0 消除内联元素间空白

当图标和文字都是内联级（如 <img> + <span></span>），它们之间的 HTML 换行会被转成一个空格字符，宽度 ≈ 当前 font-size 的一半。最直接的压制方式是切断这个来源：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 给父容器设 font-size: 0;，子元素再各自设回需要的字号（比如 font-size: 14px;）
• 注意：这会影响所有后代文本，所以只作用于最小包裹容器（如 <div class="icon-text">），别直接打在 <code> 上
• 不推荐用负 margin 抵消空隙——它依赖具体字体渲染，缩放或换字体后容易错位

更现代的解法：改用 display: flex

把图标和文字包进一个 flex 容器，空格问题就彻底绕开。它不依赖文本流，也不吃 HTML 换行空格：

• 容器加 display: flex; align-items: center;，图标和文字自动垂直居中对齐
• 用 gap: 4px; 精确控制间距，比堆   或调 letter-spacing 更稳定
• 兼容性已无顾虑：Chrome 29+/Firefox 20+/Safari 9+/Edge 12+ 都支持 gap
• 如果需兼容老 IE，退回 font-size: 0 + vertical-align 组合，别碰 flex 的 hack

真正麻烦的不是“怎么加空格”，而是“怎么让浏览器别擅自加”。多数时候，那个看似是“图标下方空隙”的东西，其实是基线对齐 + 行高 + 内联空白三者叠加的结果。盯住 vertical-align 和父容器的 font-size，比反复试   数量靠谱得多。