inline-block元素间空白间隙是html解析器将换行符、空格等视为空格字符（u+0020）渲染所致，宽度≈父容器font-size的0.25em；可用font-size:0+子元素重设字号解决，但现代项目更推荐display:flex+gap。
inline-block 元素之间的“空白间隙”不是 bug，也不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当作文本节点渲染出来的空格字符（U+0020），宽度 ≈ 父容器 font-size 的 0.25em。只要源码里两个 inline-block 元素不在同一行，这个间隙就一定存在。
为什么 font-size: 0 能消缝，但子元素必须重设字号
那个间隙本质是一个“空格字符”，它的宽度由父容器的 font-size 决定。设成 font-size: 0 后，空格失去字号，自然不占空间。但子元素会继承这个 0，导致文字不可见或 em 计算失效。
-
font-size: 0必须加在**直接包裹 inline-block 子项的父容器**上（比如.nav、ul），套多一层没设，无效 - 所有含文本的子元素必须显式声明
font-size（如14px或1rem），不能只写inherit - 如果子元素用了
line-height: 1.5或margin: 0.5em，这些值也会因继承 0 而归零，需改用无单位数值（line-height: 1.5）或px/rem -
<img>虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目优先用 display: flex + gap 替代 inline-block
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：它天然忽略 HTML 中的空白文本节点，从根源绕过间隙问题。
-
gap属性可精确控制间距（如gap: 8px），不随font-size变化，媒体查询里改字号也不用同步调 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)回退 -
vertical-align在 flex 布局下完全失效——这不是缺陷，对齐应改用align-items或justify-content
哪些“看起来能用”的方法实际容易翻车
真实项目里踩坑最多的是临时补丁叠加，而不是系统性解决：
- 手删 HTML 换行和空格：格式化工具一跑就还原，协作时极易被覆盖
- 对
或全局容器设font-size: 0：整页文字消失，且极难排查 - 叠加
letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染异常，屏幕阅读器仍按原始结构解析，可访问性受损 - 用负
margin-left: -4px：缝隙宽度随font-size变化，Chrome/Safari 渲染差异还可能导致 1px 偏差
真正容易被忽略的是：legacy 代码还没重构完时，有人一边用 font-size: 0，一边又加 transform: scale() 补丁——这些补丁本身就会触发新的渲染异常，而且无法通过自动化测试覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
