inline-block间隙是html解析器将换行符视为空格字符所致，并非bug；其宽度约等于父元素font-size的0.25em，可用font-size:0（需重置子元素字号）或现代flex+gap替代。
inline-block间隙是HTML解析器把换行符当空格渲染出来的
这个间隙不是bug，也不是你漏写了margin或padding，而是浏览器在解析HTML时，把两个inline-block元素之间的换行符、空格或制表符当作一个「文本节点」来处理——它本质就是一个空格字符，宽度≈父容器font-size的0.25em（比如font-size: 16px时约4px）。
只要源码里存在实际空白（哪怕只有一处换行），这个间隙就必然出现；JS动态插入、innerHTML拼接或模板引擎编译后无换行，则不会触发。
font-size: 0能消除间隙但必须严格重置子元素字号
给父容器设font-size: 0会让那个“看不见的空格字符”失去字号依据，从而不占空间。但它会继承到所有后代，导致严重副作用：
-
font-size: 0必须加在**直接包裹inline-block子项的父容器**上，套多一层div却没设，间隙照旧 - 所有含文本的子元素必须显式写
font-size: 16px（不能只靠inherit） -
line-height: 1.5这类em单位值会按0计算，结果为0，得改成无单位数值或px -
<img>虽无文字，旧版Safari仍可能异常，建议统一加font-size: 16px - 千万别对
body或全局容器设font-size: 0，极易遗漏恢复，整页文字消失
现代项目该用display: flex+gap替代
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex是更干净的解法：
-
gap直接控制间距，不依赖HTML源码结构，删换行/加注释都不影响 - 间隙宽度跨浏览器完全一致，不受
font-size、字体或渲染引擎差异干扰 -
vertical-align自动失效反而省事，对齐改用align-items或justify-content - IE10–11不支持
gap，可用margin-right: 8px:not(:last-child)降级
别一边用flex，一边叠transform: scale(0.99)或letter-spacing补丁——这些本身就会触发新渲染异常和可访问性问题。
哪些“看似有效”的做法其实埋坑最深
真实协作中极易失控的方案：
- 手删HTML换行：格式化工具一跑就还原，牺牲可维护性
- 用
<!-- -->隔开：模板臃肿，IDE折叠混乱，新人看不懂 -
margin-right: -4px：字体大小一变就得同步调，Chrome/Safari像素化差异可能导致1px偏移 - 对
body或全局容器设font-size: 0：极易遗漏恢复，整页文字不可见 - legacy代码里一边用
font-size: 0，一边又加负margin补丁：补丁本身会触发新渲染异常，且无法通过自动化测试覆盖
真正难处理的，是那些被老代码绑死、又不敢动布局结构的页面——这时候还得回过头来调font-size: 0，并逐层检查子元素是否漏了字号重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
