inline-block间隙不是bug，而是HTML解析器将换行符、空格等空白符渲染为宽度约0.25em的文本节点所致；可用font-size:0+子元素重设字号解决，但现代项目更推荐flex+gap。

空隙不是 bug，是 HTML 解析器把换行符、空格当作文本节点渲染的结果——它本质是个「空格字符」，宽度 ≈ 父容器 font-size 的 0.25em。

inline-block 间隙的根源是空白字符被当成文本节点

只要两个 display: inline-block 元素在 HTML 源码里不在同一行（哪怕只多一个换行或缩进空格），浏览器就会插入一个文本节点，内容就是那个空白字符。这个节点和普通文字一样受 font-size、letter-spacing 影响，所以间隙会随字号变大变小。

• 它只影响 inline 和 inline-block 元素；block、flex、grid 完全免疫
• 间隙不是 margin 或 padding，查不到对应样式，DevTools 里也看不到盒模型留白
• 即使写了 margin: 0; padding: 0;，空隙照旧

font-size: 0 是最兼容但最易翻车的方案

设父容器 font-size: 0 能让空白字符失去渲染宽度，但必须同步处理子元素字体继承问题，漏一步就全乱。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• font-size: 0 必须写在**直接包裹 inline-block 子元素的父容器**上，套多一层 div 却没设，间隙还在
• 所有含文本的子元素必须显式声明 font-size（如 16px 或 1rem），不能只写 inherit——因为父级已经是 0
• 子元素若用 em 单位（如 line-height: 1.5、margin: 0.5em），数值会归零，得改用无单位值或 px/rem
• 虽无文字，旧版 Safari 中仍可能异常，建议统一加 font-size: 16px
• 千万别对 body 或全局容器设 font-size: 0，极易遗漏恢复，整页文字直接不可见

现代项目该用 display: flex + gap

如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是根治方案：间隙不再依赖源码格式，gap 精确可控，且天然忽略空白文本节点。

• gap 不随 font-size 变化，响应式媒体查询里改字号不用同步调间距
• 删换行、加注释、用 Prettier 格式化，都不影响布局
• IE10–11 不支持 gap，可用 margin-right: 8px + :not(:last-child) 降级
• 别一边用 font-size: 0，一边又叠 transform: scale(0.99) 或 letter-spacing 补丁——这些补丁本身会触发新渲染异常，而且屏幕阅读器仍按原始 HTML 结构解析

真正容易被忽略的是：legacy 代码还没重构完时，有人混用多种“补丁式”方案，结果互相干扰，调试时根本分不清是哪个规则在起作用。

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