行内元素默认间距源于html换行符和空格被浏览器解析为一个空格字符，并依font-size和line-height渲染；font-size:0+子级重置字号或display:flex+gap是稳定解决方案。
行内元素默认间距从哪来
本质是换行符和空格被浏览器解析成一个空格字符，再按font-size和line-height渲染出物理宽度。WebKit（Chrome/Safari）和Gecko（Firefox）对空白字符的折叠与渲染细节略有差异，导致相同HTML在不同内核下margin看起来不一致——这不是bug，是规范允许的行为。
- 哪怕只写
<span>A</span><span>B</span>，中间没空格，但换行本身就会产生间隙 -
font-size: 0能干掉这个间隙，但会连带让子元素文字消失，必须重置子级font-size - 负
margin（如margin-right: -4px）看似直接，但数值依赖字体、字号、DPI，跨设备极易失效
用font-size: 0清空父容器空白
这是最稳定、兼容性最好的方案，适用于div包裹多个span/a/img等行内/行内块场景。关键不是“设为0”，而是“父子字号解耦”。
- 给父容器设
font-size: 0，彻底消除空白字符的渲染基础 - 所有子行内元素必须显式声明
font-size（如16px），否则文字不可见 - 注意
vertical-align仍生效，若子元素有基线对齐，默认可能留出底部缝隙 - IE8+、Chrome 4+、Firefox 2+ 全支持，无兼容性风险
<div style="font-size: 0"> <span style="font-size: 14px">左</span> <span style="font-size: 14px">中</span> <span style="font-size: 14px">右</span> </div>
用display: flex替代行内布局
当目标是水平排列且需要精确控制间距时，放弃inline-block改用flex，从根源上绕开空白问题。这不是“修复”，而是换更可控的模型。
- 父元素设
display: flex，子元素自动无视HTML中的换行与空格 - 用
gap属性统一控制间隔，比负边距语义清晰、响应友好 - 老版本浏览器（如IE10/11）需用
flexbox前缀，但gap在IE中完全不支持，得回退到margin - 若子元素需换行，加
flex-wrap: wrap，不影响间隙逻辑
.container {
display: flex;
gap: 8px;
}
.container > * {
flex: none; /* 防止span被拉伸 */
}
为什么不用letter-spacing或word-spacing
这两个属性作用对象是字符/单词，不是HTML结构间隙。设letter-spacing: -1px会让文字挤在一起，但无法消除span之间的空白；word-spacing对无空格连接的行内元素基本无效。
- 它们只影响文本内容渲染，不干预DOM节点间的布局间隙
- 在字体非等宽时，负值可能导致字符重叠，可读性下降
- 移动端高DPI屏下，-1px可能被渲染为0.5px，效果不稳定
- 一旦父容器有
text-align: justify，这些属性还会被干扰
实际项目里最容易漏的是：设了font-size: 0却忘了给子元素重置字号，或者用了flex但没处理flex-shrink导致小屏下内容溢出。间隙问题看着小，根子在渲染模型差异，硬调像素值只会越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
