inline-block元素间间隙源于HTML解析器将换行/空格渲染为文本节点，宽度约父级font-size的0.25em；可用font-size:0（需重置子元素）或flex布局彻底解决。
为什么 inline-block 元素之间会有看不见的间隙
这个间隙不是 margin，也不是 padding，而是 HTML 解析器把换行符和空格当作文本节点渲染出来的——只要 display: inline-block 的元素在源码里换行或有空格，浏览器就会画一个「空格字符」，宽度由父容器的 font-size 决定。
常见错误现象：div 并排后总比预期宽出几像素，调试时发现元素间有“白边”，但检查盒模型看不到 margin/padding。
- 只对
inline和inline-block生效，block或flex不受影响 - 间隙宽度 ≈ 父级当前
font-size的 0.25em（比如font-size: 16px→ 间隙约 4px） - 用
letter-spacing或word-spacing无法可靠消除，反而可能影响子元素文字
font-size: 0 确实管用，但得小心子元素继承
给父容器设 font-size: 0 能让那个“空格字符”缩成不可见，但所有子元素会继承这个 0 值，导致文字消失。
使用场景：适合纯图标、图片、无文本的 inline-block 容器，比如导航菜单项、图标配列。
立即学习“前端免费学习笔记（深入）”；
- 必须重置子元素的
font-size，例如：.parent { font-size: 0; } .parent > * { font-size: 14px; } - 如果子元素含输入框、按钮等表单控件，
font-size: 0可能导致 placeholder 或边框渲染异常（尤其旧版 Safari） - 不推荐嵌套多层，子元素再有内联子元素时，容易漏重置字体大小
flex 布局是更干净的替代方案
把父容器设为 display: flex 后，子元素默认不产生间隙，也不依赖文本渲染逻辑，语义和维护性都更好。
性能/兼容性影响：现代浏览器全支持；IE10+ 需加 -ms-flexbox 前缀（仅当必须兼容 IE）；Flex item 默认 stretch，可能意外拉高子元素高度。
- 消除间隙只需一行：
.parent { display: flex; } - 想保持左对齐且不撑满，加
flex-wrap: wrap和justify-content: flex-start - 若子元素需等宽分布，优先用
flex: 1而非固定 width，避免小屏幕溢出
其他临时解法及其风险
有人用注释删空格、负 margin、浮动等方法，但都带副作用，属于“修 bug 的 bug”。
-
<div></div><!-- --><div></div>：破坏可读性，协作时易被误删 -
margin-right: -4px：依赖具体间隙值，换字体或缩放后失效 -
float: left：脱离文档流，父容器高度塌陷，需额外清除浮动 - 用
display: table-cell：单元格默认对齐 baseline，可能产生底部空隙
真正容易被忽略的是：这个问题往往在响应式断点切换时才暴露——比如桌面端用 flex 没问题，移动端切回 inline-block 后间隙突然出现。别只测一种视口。
