间隙源于html解析器将换行符等作为空白字符渲染，导致inline-block元素间出现约4px水平间隙；最稳妥解法是父容器设font-size: 0并显式重置子元素字号，ie8+兼容且逻辑清晰。
为什么 inline-block 元素之间总有 4px 左右的间隙
这不是 bug，是 HTML 解析器把换行符、空格、制表符当普通空白字符处理的结果。这些空白被渲染成“文字空间”，而 inline-block 元素会按基线（baseline）对齐——字体大小 + 行高共同作用下，就显出约 4px 的水平间隙（实际值随 font-size 和字体变化）。img、button、span 等设为 inline-block 后都逃不掉。
font-size: 0 是最稳妥的通用解法
父容器设 font-size: 0，子元素再显式重置字号，逻辑清晰且 IE8+ 全兼容。
- 只对父元素设
font-size: 0，不给子元素设字号 → 文字直接消失 - 子元素必须单独声明
font-size（如16px或1rem），否则不可读 - Chrome 有最小字号限制，加
-webkit-text-size-adjust: none更保险 - 该方案不影响
vertical-align，但若子元素有基线对齐问题，仍需额外设vertical-align: top
Flexbox 替代方案更干净，但得看浏览器支持
把父元素改成 display: flex，空白字符天然失效，布局也更可控。
-
flex容器内，vertical-align失效，别白费劲设它 - 默认单行排列，需加
flex-wrap: wrap才换行 - 对齐要用
align-items（控制 cross-axis）和justify-content（main-axis），不是text-align - IE9 及以下不支持，老项目慎用；IE10+ 可放心上
其他方法容易踩坑，仅限特定场景
注释删空白、负 margin、letter-spacing 这些属于“临时止血”，不是根治。
- 注释写法：
<div> <img><!-- --><img> </div>—— 有效但代码难维护 - 负 margin 值依赖上下文：
margin-right: -4px在不同字体/缩放下容易失效；Chrome 常要 -8px -
letter-spacing: -0.25em虽灵活，但 Opera 最小只认 1px，且可能影响子元素内文字排版 -
float: left能挤掉间隙，但要清浮动，还破坏文档流，现代布局已不推荐
真正麻烦的不是选哪种方法，而是得先判断：间隙是否来自换行符？有没有 vertical-align 干扰？父元素是否带字体设置？没看清上下文就套方案，反而引入新问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
