inline-block间隙不是bug，而是html解析器将换行符、空格等空白符渲染为文本节点所致，宽度约父容器font-size的0.25em；消除方案中font-size:0需作用于直接父容器并重设子元素字号，现代项目更推荐flex+gap。
inline-block间隙不是bug，是HTML解析空白符的正常行为
这个间隙不是你漏写了margin或padding，而是浏览器把两个inline-block元素之间的换行符、空格或制表符当成了一个“文本节点”，并按font-size渲染出一个宽度约0.25em的空格字符。比如父容器font-size: 16px时，间隙≈4px；设为20px就变成≈5px。
它只在HTML源码里存在实际空白时出现——JS动态插入、innerHTML拼接或模板引擎编译后无换行，就不会有这问题。
为什么font-size: 0能消除间隙，但容易出错
font-size: 0让那个“看不见的空格字符”失去字号依据，自然不占空间。但它会继承到所有子元素，导致严重副作用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
font-size: 0必须加在**直接包裹inline-block子项的父容器**上，套多一层没用 - 含文本的子元素必须显式写
font-size: 16px（不能只靠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是更干净的解法：
-
gap精确控制间距，不依赖HTML源码结构 - 无需处理继承、无需猜
margin值、vertical-align自动失效反而省事 - IE10–11不支持
gap，可用margin-right: 8px :not(:last-child)降级 - 不要一边用
inline-block，一边叠加transform: scale(0.99)或letter-spacing补丁——这些本身就会触发新渲染异常和可访问性问题
哪些“看似有效”的做法其实埋坑最深
以下方案在真实协作中极易失控：
- 手删HTML换行：格式化工具一跑就还原，牺牲可维护性
- 用
<!-- -->隔开：模板臃肿，IDE折叠混乱，新人看不懂 -
margin-right: -4px：字体大小一变就得同步调，Chrome/Safari像素化差异可能导致1px偏移 - 对
设font-size: 0：整页文字消失，且极易遗漏恢复
真正容易被忽略的是：legacy代码还没重构完时，有人为了“兼容”继续用inline-block，其他人却在上面叠补丁——这些补丁本身就会让屏幕阅读器按原始HTML结构解析，造成可访问性断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
