inline-block 元素间空隙是 html 解析空白字符所致，并非 bug；应优先用 flex 布局替代，配合 gap 控制间距，避免 font-size:0 等 hack 方案。
为什么 display: inline-block 元素间总有看不见的空隙
这不是 bug，是 HTML 解析规则导致的：元素间的换行符、空格、制表符，在文本渲染上下文中会被合并成一个空格，而 inline-block 会参与这一流程。只要源码里写了换行或空格，浏览器就真给你留出那个空隙——哪怕你没写任何文字。
常见错误现象：margin-left 看似设为 0，但元素横向排列后总“多出几像素”；用 calc(50% - 2px) 死磕也对不齐；调试时发现 box-sizing: border-box 没用，因为问题根本不在盒模型。
- 使用场景：导航栏菜单项、图标按钮组、响应式卡片网格（还没切到
flex或grid的老项目） - 别指望
font-size: 0在父容器上一劳永逸——子元素若含文本，得重置font-size，且可能影响行高、垂直对齐 - 用注释
<!-- -->消除 HTML 中的空白字符最稳妥，但可读性差，协作时容易被误删
用 flex 替代 inline-block 是最省心的解法
Flex 布局天然不解析空白字符，gap 属性还能精确控制间距，比“消除空隙”更主动、更可控。
性能和兼容性注意点：IE10+ 支持 display: flex，但 IE10–IE11 不支持 gap；如需兼容，可用 margin 模拟，但要避开最后一个子项的多余外边距。
立即学习 “ 前端免费学习笔记（深入）”；
- 把父容器样式从
display: inline-block改成display: flex - 移除所有为“去空隙”加的 hack（比如
font-size: 0、负margin） - 用
gap: 8px替代手动计算子项宽度，避免calc()表达式出错 - 若需换行，加
flex-wrap: wrap，此时gap依然生效
vertical-align 会影响 inline-block 间隙的视觉表现
即使清除了 HTML 空白，inline-block 默认按 baseline 对齐，而基线位置取决于内容（比如文字下降部分），会导致元素“看起来没对齐”，误以为还有空隙。
错误现象：两个等高 div 设了相同 height 和 line-height，但底部不平齐；加了 margin-top: -4px 才勉强对上。
- 统一设
vertical-align: top或vertical-align: middle，比调margin更可靠 - 如果子元素含图片，默认带下划线间隙，
vertical-align: top能直接解决 - 注意：这个属性只对
inline、inline-block、table-cell生效，对block无效
别在现代项目里硬扛 inline-block 的空隙问题
Flex 和 Grid 已覆盖所有主流浏览器多年，连 iOS Safari 10.3 都支持 gap。还用 inline-block + 各种 hack，本质是在维护一套过时的布局契约。
真正容易被忽略的是：当团队某人为了“兼容旧代码”继续用 inline-block，其他人会在其基础上叠加 transform: scale(0.99) 或 letter-spacing: -4px 这类不可维护的补丁——问题没消失，只是沉得更深了。
