inline-block元素间间隙非bug，而是HTML解析将换行符、空格视为空格字符（U+0020）渲染所致，宽度≈父容器font-size的0.25em；推荐现代项目优先使用display: flex + gap方案，兼容性好且无需处理字体继承问题。
inline-block 元素之间的间隙不是 bug，也不是你漏写了 margin 或 padding，而是浏览器把 HTML 源码里的换行符、空格当成了一个真实存在的空格字符（U+0020），并按父容器的 font-size 渲染出约 0.25em 宽度的空白。它只在源码中存在实际空白时出现，JS 动态插入或模板编译后无换行就不会有。
为什么 font-size: 0 能消除间隙但容易出错
设 font-size: 0 是让那个“看不见的空格字符”失去字号依据，从而不占空间。但它会继承到所有子元素，引发一连串副作用：
-
font-size: 0必须加在直接包裹 inline-block 子项的父容器上，套多一层 div 却没设，完全无效 - 所有含文本的子元素必须显式写
font-size: 14px（不能只靠inherit） -
line-height: 1.5这类 em 单位值会按 0 计算得 0，得改用无单位数值或 px -
font-size: 16px - 子元素若用了
width: 20em，也会算成 0，必须改用 px 或 rem
现代项目该优先用 display: flex + gap
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：
-
flex布局天然忽略 HTML 中的空白文本节点，无需处理font-size继承问题 -
gap属性可精确控制间距（如gap: 8px），响应式下稳定，不随font-size变化 -
vertical-align自动失效反而省事，对齐改用align-items或justify-content - IE10–11 不支持
gap，可用margin-right: 8px:not(:last-child)回退
哪些“看似有效”的做法其实埋坑最深
这些方案在协作中极易失控，且无法通过自动化测试覆盖：
- 手删 HTML 换行：格式化工具一跑就还原，牺牲可维护性
- 用
隔开：模板臃肿，IDE 折叠混乱，新人看不懂 -
margin-right: -4px：字体大小一变就得同步调，Chrome/Safari 渲染差异可能导致 1px 偏移 - 对
或全局容器设font-size: 0：极易遗漏恢复，整页文字消失 - 一边用
inline-block，一边叠加transform: scale(0.99)或letter-spacing: -0.31em：补丁本身会触发新渲染异常，屏幕阅读器仍按原始 HTML 结构解析，造成可访问性断裂
真正容易被忽略的是：legacy 代码还没重构完时，不同人可能在同一个父容器上混用 font-size: 0 和负 margin 补丁——这些补丁之间会相互干扰，而且调试时很难定位是哪个规则在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
