display: inline-block元素间空隙是因html空白字符被解析为文本节点所致，间隙宽度=父容器font-size的0.25em；可通过父级font-size:0+子级重置、flex布局、移除html空白或负margin等方案消除。
为什么 display: inline-block 元素之间总有看不见的空隙
这不是 bug，是浏览器把换行符、空格当作文本节点渲染的结果。HTML 中写成多行的 <div> 或 <code><span></span> 标签，只要中间有空白字符（包括回车），就会被解析为一个空格，在行内上下文中就表现为间隙。
常见错误现象：inline-block 元素横向排列后总比预期宽，用开发者工具看元素之间有 4px 左右的空白；加了 margin: 0 也没用；用 float 能避开但带来清除浮动新问题。
- 这个间隙宽度 = 父容器当前
font-size的 0.25em（通常约 4px） - 只影响
inline和inline-block元素，block或flex不受影响 - 即使子元素本身
font-size: 0，父级没设，空隙照旧
用 font-size: 0 消除间隙的实际写法
核心是让父容器“看不见”那个空格——把字体大小设为 0，空格就没宽度了。但要注意子元素得重置回来，否则文字全看不见。
使用场景：导航栏菜单项、图标按钮组、响应式图片栅格等需要精确横向对齐的 inline-block 布局。
立即学习“前端免费学习笔记（深入）”；
- 父级设
font-size: 0，子级必须显式恢复字体大小，比如font-size: 16px - 如果子元素含输入框、下拉框等表单控件，它们的默认字体可能继承异常，需单独指定
font-size - 不要只在开发时设
font-size: 0，上线后也生效；它不影响可访问性，屏幕阅读器仍能读取内容
.nav {
font-size: 0;
}
.nav-item {
display: inline-block;
font-size: 14px; /* 必须重置 */
}比 font-size: 0 更稳妥的替代方案
它有效，但副作用明显：所有子元素文本都要手动重置字体，嵌套深时容易漏；而且如果子元素用了 em 单位做尺寸计算，会受父级 font-size: 0 影响而失效。
性能/兼容性影响：无渲染性能问题，IE8+ 全支持，但语义和维护成本偏高。
- 改用
flex：父级display: flex，间隙自动消失，现代项目首选 - 移除 HTML 空白：把标签写成
<div></div> <div></div>连写，可读性差，团队协作难接受 - 负
margin抵消：比如margin-right: -4px，但需适配不同字号，响应式下易错
最容易被忽略的细节：伪元素和注释也会触发间隙
很多人以为只要删掉换行就行，结果发现还是有缝——因为 HTML 注释 <!-- -->、或用 ::before/::after 插入的纯空格内容，同样会被当作文本节点参与布局。
- 检查开发者工具 Elements 面板里，两个
inline-block元素之间是否夹着#text节点 - 注释写在标签同一行末尾（
<div></div> <!-- --><div></div>）仍会产生空格 - 用伪元素生成内容时，避免只写空格，比如
content: " "就会引入间隙
事情说清了就结束
