inline-block元素间4px间隙源于html解析器将换行/空格转为文本节点，其宽度为父元素font-size的0.25em；解决方案包括font-size:0+子元素重置字号、改用display:flex，或html注释消除空白。
行内块级元素（display: inline-block）之间那“凭空出现”的 4px 间隙，不是你 CSS 写错了，也不是浏览器 bug——是 HTML 解析器把换行符和空格当成了真实存在的文本节点。直接设 margin: 0 没用，硬调 vertical-align 也压不住，得从根源上让它“看不见”那个空格。
为什么 inline-block 元素间总有 4px 空隙
HTML 源码里两个 <div class="item"></div> 标签之间只要换行或留空格，浏览器就会生成一个文本节点，内容就是那个空格。这个空格的宽度 = 父容器当前 font-size 的 0.25em（常见字体下约 4px）。它只影响 inline 和 inline-block 元素，block 或 flex 容器里完全不生效。
常见错误现象：<nav></nav> 菜单项错位、图片栅格对不齐、按钮组中间漏白线；开发者工具里看元素盒模型，明明没设 margin，元素间却有固定间距。
font-size: 0 是最稳的现场急救法
核心逻辑：让父容器“看不见”那个空格——把字体大小设为 0，空格就没了宽度。但子元素文字会跟着消失，所以必须显式重置。
- 父容器加
font-size: 0，比如.nav { font-size: 0; } - 每个子元素单独设回正常字号，比如
.nav a { font-size: 16px; } - 如果子元素含表单控件（
<input>、<select></select>），它们可能继承异常，需额外指定font-size - 注意：该方案在 IE8+、所有现代浏览器都可靠，不影响可访问性，屏幕阅读器照常读取内容
改用 display: flex 是一劳永逸的解法
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失，还能用 gap 精确控制间距。
-
.nav { display: flex; }后，子元素默认水平排列、无间隙、支持justify-content对齐 - 子元素无需再设
display: inline-block，哪怕原来是<a></a>或<span></span>，flex 会自动处理布局 - 兼容性注意：IE10+ 支持，若必须兼容 IE9 及更早版本，不能选此方案
- 旧代码若依赖
vertical-align控制对齐，要重写为align-items或align-self
HTML 注释法适合不能动 CSS 的场景
当项目限制无法修改样式表，或需要快速 patch 已上线页面时，用 HTML 注释“吃掉”空白字符，零 CSS 成本见效快。
写法：<div class="item">1</div>
<!-- --><div class="item">2</div>
<!-- --><div class="item">3</div>
要点：
- 注释必须紧贴标签，前后不留空格，否则空格还在
- 结构略显杂乱，长期维护成本略高，但兼容性极好（所有浏览器）
- 不要和压缩工具冲突——有些 HTML 压缩器会删掉注释，导致间隙重现
真正容易被忽略的是：这个间隙不是“样式问题”，而是 HTML 解析行为。无论你用哪种方法，本质都是在覆盖或绕过那个被解析出来的空格文本节点。改布局（flex）比修样式（font-size: 0）更彻底，但前提是能接受重构成本；临时救火优先 font-size: 0；连 CSS 都不能碰，就靠注释硬刚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
