inline-block元素间空隙源于HTML解析器将换行/空格作为空白文本节点渲染，表现为约4px间隙；可通过HTML压缩、font-size:0、负margin或flex布局消除。
为什么 display: inline-block 元素之间总有看不见的空隙
这不是 bug，是 HTML 解析器把换行符和空白符当作文本节点渲染的结果。只要两个 inline-block 元素在源码里用换行或空格分隔，浏览器就会插入一个「空格字符」，而这个空格会参与行内布局，表现为约 4px 的间隙（取决于字体大小和 font-family）。
常见表现：nav 里的菜单项错位、gallery 图片网格对不齐、按钮组中间出现白线。
消除 inline-block 间距的四种可靠方法
没有“绝对最优”，选哪种取决于你是否能改 HTML 结构、是否要兼容老项目、以及是否已有字体设置干扰。
-
HTML 层面抹掉换行：把
<div class="item"></div><div class="item"></div>写成一行，或用 HTML 注释连接：<div class="item"></div><!--><div class="item"></div> -
CSS 层面重置父容器字体：给父元素设
font-size: 0;，再给子元素单独设需要的font-size（否则文字会消失） -
负 margin 微调：
margin-right: -4px;或vertical-align: top;配合使用，但需注意不同字体下空隙宽度可能浮动 -
用 flex 替代（推荐新项目）：父容器加
display: flex;，天然无间隙，且支持对齐、换行、响应式等扩展能力
inline-block + vertical-align 组合容易踩的坑
默认值是 baseline，会导致元素底部对不齐——尤其混用图片和文字时，图片下方总有一截空白。这不是间距，是基线对齐产生的“视觉间隙”。
立即学习“前端免费学习笔记（深入）”；
- 统一设为
vertical-align: top;或middle;可快速修复对齐问题 - 如果用了
font-size: 0;消间隙，又忘了给子元素恢复字号，文字会不可见 -
line-height设得过大也会放大间隙，特别是父容器有高度限制时
现代布局中该不该继续用 inline-block
纯 CSS Grid 或 Flex 已覆盖绝大多数场景。inline-block 真正适用的只剩少数情况：需要保持文档流、同时又依赖行内特性（比如配合 text-align 居中多个固定宽高块），或者维护老 IE8+ 项目。
如果你正在写新页面，且只支持 IE10+，优先用 display: flex;；如果必须兼容 IE9，inline-block 加 font-size: 0; 是最稳的组合。
最常被忽略的一点：间隙不是来自 CSS，而是来自 HTML 文本节点本身——所以任何方案都绕不开“控制空白符”的本质。
