inline元素间空隙是HTML规范行为，因换行缩进被解析为空白字符并渲染为空格；解决优先用flex/grid布局，其次删源码空白或注释“吃掉”，慎用font-size:0和vertical-align。
为什么 inline 元素之间总有看不见的空隙
这不是 bug，是规范行为：HTML 解析器把换行、缩进、空格都当作一个空白字符处理，而 inline 元素（比如 <span>、<a>、<img>）会把这些空白渲染成一个空格宽度的间隙。你在编辑器里写的换行，在浏览器里就变成了像素级的“白条”。
常见错误现象：display: inline-block 的按钮或标签横向排列时出现固定 4px 左右间隙；<img> 行内摆放时底部对不齐，或者和文字间有奇怪留白。
- 使用场景：导航栏菜单、图标按钮组、标签云、响应式图片栅格
- 根本原因不是 CSS 错了，而是 HTML 源码结构触发了 inline 空白处理规则
- 不要试图用
margin: -4px硬扣——不同字体、字号、行高下间隙宽度不一致，不可靠
去掉父容器里的空白字符最直接
让 HTML 不产生那个“空格”，间隙自然消失。这比后期用 CSS 折腾更干净，也无兼容性问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把子元素写在同一行：
<div><span>A</span><span>B</span></div>（可读性差，适合构建工具自动处理） - 用 HTML 注释“吃掉”空白：
<div><span>A</span><!--><span>B</span></div> - 服务端模板或构建时用插件（如 PostHTML、htmlnano）自动移除文本节点中的空白
注意：font-size: 0 在父级上设为 0 再在子级重设，虽有效但可能影响 em 计算和可访问性，慎用。
vertical-align 影响的是对齐方式，不是间隙本身
很多人调 vertical-align: top/middle/bottom 是为了“让图片不掉下去”，但这只是掩盖了问题——间隙还在，只是视觉上没那么突兀了。
关键点：
-
vertical-align只对inline和inline-block生效，对flex或grid项无效 - 默认值是
baseline，而图片的 baseline 在底部附近，所以看起来像“悬空” - 设成
top或middle后，间隙依然存在，只是上下对齐变了，别误以为它被“修复”了
示例：<img src="x.jpg" style="vertical-align: top"> 文字 —— 图片顶边对齐了，但图片和文字之间那段空白还是在。
现代布局优先用 flex 或 grid 替代 inline-block
如果你控制得了容器样式，这是最彻底的解法：脱离 inline 流，空白字符不再参与布局计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导航栏用
display: flex，配gap精确控制间距：nav { display: flex; gap: 12px; } - 图标组用
display: grid+grid-template-columns: repeat(auto-fit, minmax(40px, 1fr))，间隙由gap统一管理 - 兼容性注意：IE11 不支持
gap（可用margin降级），但flex本身支持到 IE10+
别忘了：只要不用 inline 或 inline-block，HTML 里的换行就真的只是换行，不会变成页面上的像素。
最容易被忽略的是——间隙只在「源码有空白 + 元素是 inline 级」时才出现。一旦你切到 flex 或 grid，问题根源就没了，而不是在那儿调 letter-spacing 或 word-spacing。
