行内元素间空白符渲染空隙源于HTML换行/空格被解析为U+0020空格字符，宽度约等于当前字体下单个空格；解决方式包括删HTML空格、font-size:0、white-space:nowrap、flex布局等，需据场景权衡。
行内元素默认有空白符渲染空隙
行内元素（如 <span>、<a>、<img>）在 HTML 源码中若存在换行或空格，浏览器会将其视作一个“空白字符”（U+0020），并按 white-space: normal 规则合并渲染为单个空格——这就是空隙的根源。它不是 margin 或 padding，而是文本级渲染行为。
- 该空隙宽度 ≈ 当前字体下 1 个空格的宽度（受
font-family、font-size、letter-spacing影响） - 只出现在「相邻行内级元素之间」，块级元素不受此影响
-
<img>是替换元素，但默认 display 为inline，同样参与空白符处理
解决空隙的常用方式及适用场景
没有银弹方案，选哪种取决于结构是否允许修改 HTML 或能否接受副作用：
- 移除 HTML 中的换行与空格：把
<span>A</span><span>B</span>写成<span>A</span><span>B</span>（无换行无空格）——最直接，但牺牲可读性 - 父容器设
font-size: 0，子元素重设font-size：适合纯图标/按钮组，注意line-height和vertical-align可能错乱 - 父容器设
white-space: nowrap，子元素用white-space: normal覆盖：对文字内容友好，但需确保子元素不依赖换行布局 - 使用
display: flex替代inline布局：现代项目首选，空隙彻底消失，且控制力更强
vertical-align 会让空隙看起来更奇怪
行内元素默认 vertical-align: baseline，而基线位置依赖父容器的字体度量。当混用不同字号、行高或含图片的行内元素时，它们的基线对齐会导致视觉上“空隙变大”或“元素悬浮”，实际空隙宽度没变，只是对齐错位放大了感知偏差。
- 图片默认与文字基线对齐，底部留出约 3–4px 空隙（用于降部字母如 g、y）
- 设
vertical-align: middle或top可缓解，但不能消除源头发起的空白符空隙 - 若同时用了
font-size: 0，记得给图片加vertical-align: top，否则可能因基线计算异常出现 1px 错位
Flex 布局下为什么没空隙
因为 display: flex 的子项是「弹性项目」，不再是「行内级元素」，HTML 源码中的空白符不再参与渲染。此时换行、缩进、空格全部被忽略——这是规范行为，不是 hack。
立即学习“前端免费学习笔记（深入）”；
div {
display: flex;
}
div span {
/* 即使 HTML 中写成
<span>A</span>
<span>B</span>
渲染也紧挨着 */
}要注意的是：flex 会改变文档流和盒模型行为，比如 vertical-align 失效、line-height 不再影响排列——如果旧逻辑重度依赖这些，迁移需验证。
真正容易被忽略的是：空隙问题本质是「HTML 解析 + CSS 渲染」两级协作的结果，只调样式不改结构，或只删空格不看对齐，往往只能解决一半。
