inline-block元素间空隙不是bug，而是html解析器将源码中换行符、空格等空白字符解析为#text节点，在ifc中按父容器font-size渲染出约0.25em宽的空格。
这个空隙不是 bug，也不是你漏写了 margin 或 padding，而是浏览器把 HTML 源码里的换行符、空格、制表符当成了一个真实存在的空格字符（U+0020），并按父容器的 font-size 渲染出约 0.25em 宽度的空白。
inline-block 元素间空隙的本质是文本节点
HTML 解析器在构建 DOM 时，会把标签之间的空白（包括回车、缩进、空格）解析为一个 #text 节点。这个节点属于行内格式化上下文（IFC），和 span 里的空格一样参与布局——它有字体、有行高、有基线，自然就占位了。
- 只要两个
display: inline-block元素在源码中不在同一行，就会出现该空隙 - JS 动态插入或模板编译后无换行（如
innerHTML = '<div></div> <div></div>'），就不会产生 - 用开发者工具检查 Elements 面板，能看到两个元素之间夹着一个灰色的
#text节点 - 注释
<!-- -->、伪元素::before插入的空格，同样会触发该行为
font-size: 0 能消缝但副作用极强
设父容器 font-size: 0 是让那个“空格字符”失去字号依据，从而不占空间。但它会继承到所有子元素，引发一连串副作用：
-
font-size: 0必须加在直接包裹inline-block子项的父容器上；套多一层div却没设，完全无效 - 所有含文本的子元素必须显式写
font-size: 14px（不能只靠inherit） -
line-height: 1.5这类 em 单位值会按 0 计算得 0，得改用无单位数值或px -
<img>虽无文字，旧版 Safari 仍可能异常，建议统一加font-size: 16px - 子元素若用了
width: 20em，也会算成 0，必须改用px或rem
现代项目应优先用 display: flex + gap
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：
- flex 布局天然忽略 HTML 中的空白文本节点，从根源绕过空隙问题
-
gap属性可精确控制间距（如gap: 8px），响应式下稳定，不随font-size变化 -
vertical-align自动失效反而省事，对齐改用align-items或justify-content - IE10–11 不支持
gap，可用margin-right: 8px:not(:last-child)回退
真正容易被忽略的是补丁叠加冲突
legacy 代码还没重构完时，不同人可能在同一个父容器上混用 font-size: 0 和 transform: scale(0.99)、letter-spacing: -0.31em 等补丁——这些规则之间会相互干扰，调试时很难定位是哪个规则在起作用。而且这类 hack 会破坏可访问性：屏幕阅读器仍按原始 HTML 结构解析，但视觉层已被强行挤压或缩放，语义断裂风险极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
