空隙源于html解析器将换行缩进视为空白字符，按规范渲染为间隙；最稳妥解法是父容器设display: flex，子元素自动紧贴且空白失效，兼容ie11+；保留inline时可用font-size: 0（需子元素重置字号）、删空白或注释法，但各有可读性或维护缺陷。
为什么 inline 元素间会有空格？
HTML 解析器会把标签之间的换行、缩进、空格全部当作一个空白字符处理，而 <span></span> 是 inline 元素，默认遵循文本流规则——所以你在代码里写成多行、带缩进的 <span></span>，浏览器就会渲染出实际的空隙。
这不是 bug，是规范行为。常见现象：几个 <span></span> 并排显示时，中间出现 2–4px 的不可控间隙，尤其在用 font-size: 0 或 letter-spacing 调整布局时更明显。
用 display: flex 替代纯 inline 布局
最稳妥的解法是放弃让多个 <span></span> 靠自身 inline 行为对齐，改用父容器控制布局。只要父元素设为 display: flex，子 <span></span> 就自动紧贴，空格彻底失效。
- 父容器加
display: flex，子<span></span>不需要额外样式 - 若需换行，加
flex-wrap: wrap - 注意：
vertical-align在 flex 容器中无效，改用align-items - 兼容性好，现代浏览器和 IE11+ 都支持
<div style="display: flex"> <span>A</span> <span>B</span> <span>C</span> </div>
保留 inline 布局时的三种“去空格”技巧
如果必须维持 inline 布局（比如嵌入段落文本中），可选以下任一方式，但要注意副作用：
-
font-size: 0在父元素上设置，子<span></span>单独恢复font-size—— 简单有效，但影响 line-height 计算，且子元素若含图片需额外设vertical-align - HTML 中删掉标签间的换行与空格：
<span>A</span><span>B</span><span>C</span>—— 可读性差，维护成本高，CI/格式化工具可能自动加回空格 - 用注释节点连接：
<span>A</span><!-- --><span>B</span><!-- --><span>C</span>—— 兼容性最好，但语义冗余，多人协作时容易被误删
别忽略 white-space 和 letter-spacing 的干扰
有时候空隙不是来自 HTML 结构，而是 CSS 的隐式影响。比如父元素设了 white-space: pre 或 letter-spacing: 2px，会导致所有 inline 内容（包括 <span></span> 之间的空格）被放大或保留。
- 检查父级是否设置了
white-space，特别是pre、pre-wrap - 确认没有全局或继承的
letter-spacing泄漏到该区域 - 用浏览器开发者工具的“Computed”面板看
white-space和letter-spacing实际值，比只查 Styles 更可靠
真正麻烦的不是空格本身，而是它常和 line-height、vertical-align、字体度量交织在一起，导致调整一处，另一处又偏移。动手前先用开发者工具勾选“Show layout shifts”，盯着渲染结果调，比凭经验猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
