空白间隙源于HTML解析器将换行符/空格视为空格字符（U+0020）在IFC中渲染，宽度≈父容器font-size的0.25em；推荐font-size:0+子元素重设字号（IE8+兼容）或现代flex+gap方案。
空白间隙不是 bug，是 HTML 解析器把换行符和空格当作文本节点渲染的结果，宽度 ≈ 父容器 font-size 的 0.25em；解决它不能靠“删空格”或“负 margin”硬凑，得选对方案并避开继承陷阱。
为什么 inline-block 元素间总有 4px 左右的空白
这个间隙来自源码里的换行符、空格、制表符——它们被浏览器当作一个 U+0020 空格字符处理，在行内格式化上下文（IFC）中渲染。只要两个 display: inline-block 元素在 HTML 中不在同一行，就会出现。它不是 margin 或 padding，改了元素自身样式无效；它的宽度随父容器 font-size 变化（比如 font-size: 16px 时约 4px），不是固定像素值。
font-size: 0 是兼容性最好的解法，但必须重置子元素字号
这是目前 IE8+ 都能稳定运行的方案，但极易因遗漏重置导致文字消失或布局错乱：
-
font-size: 0必须设在直接包裹inline-block子项的父容器上；套多一层div却没设，完全无效 - 所有子元素会继承
font-size: 0，所以每个含文本的子元素必须显式声明font-size（如16px或1rem），不能只写inherit - 若子元素用了
em单位（如line-height: 1.5或width: 20em），计算结果为 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 是更干净、语义更清晰的解法：
立即学习“前端免费学习笔记（深入）”；
-
gap属性直接控制间距，不依赖字体大小，响应式友好 - 无需操心
vertical-align对齐问题，也避免了font-size继承污染 - 回退方案可用
margin-right: 8px+:not(:last-child)，比负 margin 更可控 - 避免使用
letter-spacing、word-spacing或transform: scale()补丁——这些会触发新渲染异常，且屏幕阅读器仍按原始 HTML 结构解析
哪些“看似有效”的做法实际埋坑最深
真实项目里最容易被误用、后期难维护的方案：
- 手删 HTML 换行和空格：牺牲可读性，代码格式化工具一运行就还原
- 用
<!-- -->注释隔开：代码臃肿，协作时容易漏删或误删 -
margin-left: -4px：缝隙宽度随font-size变化，媒体查询里改字号就得同步调；Chrome/Safari 渲染差异还可能导致 1px 偏差 - 对
<body>或全局容器设font-size: 0：极易遗漏恢复，整页文字消失 - 一边用
font-size: 0，一边又加transform: scale(0.99)或letter-spacing: -0.31em补丁——补丁本身就会触发新的渲染异常
真正容易被忽略的是：legacy 代码还没重构完时，有人会混合使用多种“补丁”，结果是问题没解决，反而叠加出更难定位的渲染异常。间隙本身简单，但修复方式的选择决定了后续维护成本有多高。
