inline元素间空隙是html规范行为，因换行缩进被解析为空白字符并渲染为空格；解决优先用flex/grid布局，其次删源码空白或注释“吃掉”，慎用font-size:0和vertical-align。
为什么 inline 元素之间总有看不见的空隙
这不是 bug，是规范行为：HTML 解析器把换行、缩进、空格都当作一个空白字符处理，而 inline 元素（比如 <span></span>、<a></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></div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
