inline-block 元素间存在空隙是 HTML 解析器将换行与空白符作为空文本节点渲染所致，并非 bug；需通过 font-size: 0、注释或单行书写消除，同时须设置 vertical-align 控制对齐，且注意换行与宽度计算问题。
inline-block 元素间有看不见的空隙
这不是 bug，是 HTML 解析器把换行符和空白符当作文本节点渲染的结果。只要 <div> 写成多行、中间有缩进或回车，浏览器就会在相邻 <code>display: inline-block 元素之间塞一个空格宽度的间隙。
常见错误现象：width: 33.33% 的三个盒子并排后换行，或者右边留白；用开发者工具选中元素会发现盒模型里 margin 右侧“莫名”多出几像素。
- 把所有
<div> 标签写在同一行（不推荐，可维护性差）<li>给父容器设 <code>font-size: 0，子元素再单独设font-size（最常用） - 用注释 消除标签间的空白（写起来烦，但语义清晰）
- 统一设
vertical-align: top或vertical-align: middle，比 baseline 更可控 - 别依赖默认值，哪怕看起来“刚好对齐”，换个字体或字号就偏了
-
vertical-align对父容器无影响，只作用于同行内块级元素之间的相对位置 - 确保子元素总宽度（含间隙） ≤ 100%，比如用
width: calc(33.33% - 4px)扣掉间隙 - 给父容器加
white-space: nowrap，子元素加white-space: normal恢复文本换行（适合单行平铺） - 注意：
nowrap会让内容溢出容器而不折行，需配合overflow控制
vertical-align 影响对齐，不是只对图片有用
inline-block 元素默认按 vertical-align: baseline 对齐，而 baseline 是文字基线，不是盒子底部。如果子元素高度不同、或含文本，很容易出现“上下错位”。
使用场景：平铺的卡片、图标按钮、带标题的缩略图——只要高度不一致，就可能歪。
立即学习“前端免费学习笔记（深入）”；
父容器必须清除换行才能真正“水平平铺”
如果父容器是 white-space: normal（默认），且子元素总宽度 + 间隙 > 100%，它们就会自动折行。你以为设了 width: 33.33% 就能三列，结果第二行冒出一个盒子。
性能 / 兼容性影响：不用 float 或 flex，纯 inline-block 在 IE8+ 都支持，但换行逻辑完全由文本流控制，非常脆弱。
比起 inline-block，现在更该想清楚要不要用它
你真需要兼容 IE8？还是只是习惯性避开 flex？inline-block 的间隙、对齐、换行问题全得手动兜底，而 display: flex 一行 flex-wrap: wrap 就搞定响应式平铺。
容易被忽略的地方：现代项目里，用 inline-block 往往不是为了兼容，而是没想清布局意图——比如把导航项写成 inline-block，其实更适合 flex 或 grid；一旦要加 hover 动画、响应式断点、垂直居中，补丁越打越多。
