inline-block元素间4px间隙源于HTML解析器将换行/空格转为文本节点，其宽度为父元素font-size的0.25em；解决方案包括font-size:0+子元素重置字号、改用display:flex，或HTML注释消除空白。
行内元素（inline 或 inline-block）之间出现的空格间隙，不是 CSS 没写对，也不是浏览器 bug——是 HTML 解析器把换行符和空格当成了真实文本节点，渲染成一个宽度为 font-size * 0.25em 的空格。直接设 margin: 0 无效，vertical-align 也压不住。
为什么 inline-block 元素间总有 4px 间隙
HTML 源码里两个 <div class="item"></div> 标签之间只要换行或留空格，浏览器就生成一个 #text 节点，内容就是那个空格。这个空格的宽度 = 父容器当前 font-size 的 0.25em（常见为 16px × 0.25 = 4px）。它只影响 inline 和 inline-block 元素，block 或 flex 容器里完全不生效。
常见错误现象：<nav> 菜单项错位、图片栅格对不齐、按钮组中间漏白线；开发者工具里看盒模型，明明没设 margin，元素间却有固定间距。
用 font-size: 0 + 子元素重置字号最稳
核心逻辑：让父容器“看不见”那个空格——把字体大小设为 0，空格就没了宽度。但子元素文字会跟着消失，所以必须显式重置。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
font-size: 0，比如.nav { font-size: 0; } - 每个子元素单独设回正常字号，比如
.nav a { font-size: 16px; } - 如果子元素含
<input>、<select>，它们可能继承异常，需额外指定font-size - 该方案在 IE8+、所有现代浏览器都可靠，不影响可访问性，屏幕阅读器照常读取内容
改用 display: flex 是一劳永逸的解法
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失，还能用 gap 精确控制间距。
-
.nav { display: flex; }后，子元素默认水平排列、无间隙、支持justify-content对齐 - 子元素无需再设
display: inline-block，哪怕原来是或，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> - 注意：注释必须紧贴标签，不能有空格，否则仍会生成
#text节点 - 伪元素（如
::before插入空格）、<textarea>的基线对齐等也会触发类似间隙，需单独处理
最容易被忽略的是：开发者工具 Elements 面板里两个元素之间是否夹着 #text 节点——这是判断间隙根源的最直接证据。别只盯着 CSS，先确认 DOM 结构里有没有那个“看不见的空格”。
