inline-block元素间间隙源于HTML空白字符被渲染为一个空格；可通过删除源码换行/空格、注释隔断、构建工具压缩或CSS的font-size:0/letter-spacing/flex/grid解决，IE8/9等特殊场景才需删HTML空格。
inline-block元素之间为什么会有看不见的间隙
这个间隙不是CSS的margin或padding，而是HTML解析器把换行符、制表符、空格等空白字符渲染成一个空格宽度（通常约4px），再被inline-block当作“文本内容”来处理。只要两个inline-block标签在源码里换行或有空格，浏览器就会画出这个间隙。
去掉HTML源码换行和空格的实操方式
这不是“推荐做法”，但确实有效，适合静态页面或构建流程可控的场景：
- 把
<div class="item"></div><div class="item"></div>写成一行，中间不留任何空白（包括换行） - 用HTML注释“吃掉”换行：
<div class="item"></div><!--\n--><div class="item"></div> - 服务端模板（如Jinja2、EJS）启用压缩输出，或构建工具（如Webpack + html-webpack-plugin）配
minify: { collapseWhitespace: true }
注意：手写HTML时硬凑一行会牺牲可读性；多人协作项目中，这种写法容易被格式化工具自动打回原形。
更靠谱的CSS替代方案（不碰HTML结构）
真正可持续的解法是让CSS接管空白处理，而不是靠删源码空格：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
font-size: 0，子元素再单独设font-size（注意行高、内联元素文字会消失） - 用
letter-spacing: -0.31em配合子元素重置letter-spacing: normal（兼容性好，但需微调负值） - 改用
display: flex或display: grid——现代布局下，inline-block本就该逐步淘汰
别忘了测试vertical-align默认值（baseline）带来的额外错位，它常和间隙叠加，让问题看起来更复杂。
哪些场景真得靠删HTML空格
极少数情况绕不开源码干预：
- 必须支持IE8/9，且不能用flex/grid
- 第三方HTML片段无法加CSS（比如CMS输出的富文本区域里插了
inline-block按钮） - SSR生成的静态页需极致首屏渲染精度，连1px间隙都不可接受
这时候删空格是权宜之计，但得同步加注释说明原因，否则半年后你自己也会对着那段紧贴的HTML发呆。
