inline-block间隙不是bug，而是浏览器将html源码中元素间的空白符（换行、空格等）解析为宽度约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让那个“看不见的空格字符”失去字号依据，自然不占空间。但它会继承到所有子元素，导致严重副作用：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 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、row-gap、column-gap直接控制间距，无需猜测像素值
• 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偏移
• 对或全局容器设font-size: 0：极易遗漏恢复，整页文字消失

真正容易被忽略的是：legacy代码还没重构完时，有人为了“兼容”继续用inline-block，其他人却在上面叠补丁——这些补丁本身就会让屏幕阅读器按原始HTML结构解析，造成可访问性断裂。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！