HTML中inline-block元素间4px间隙是浏览器对空白字符的标准解析行为，源于换行/空格生成文本节点，宽度为父元素font-size的0.25em；可用font-size:0、flex布局或HTML注释法解决。
HTML 中的“空格间隙”不是 bug，是浏览器对空白字符的标准解析行为；只要元素处于行内格式化上下文中（inline、inline-block、img、textarea 等），源码里的换行/缩进/空格就会被转成一个真实存在的文本节点，并渲染为约 4px 宽的间隙——这不是 CSS 错误，不能靠 margin: 0 或 padding: 0 解决。
为什么 display: inline-block 元素间总有 4px 间隙
根源在 HTML 解析器：两个 <div class="item"></div> 标签之间只要存在换行或空格，就会生成一个文本节点，内容就是那个空格；它的宽度 = 父容器当前 font-size 的 0.25em（常见为 16px × 0.25 = 4px）。这个间隙只影响 inline 和 inline-block 元素，block 或 flex 容器里完全不生效。
- 常见错误现象：
<nav></nav>菜单项错位、图片栅格底部漏白、按钮组中间出现细线 - 开发者工具中检查盒模型，会发现元素本身
margin/padding全为 0，但间距依然存在 -
vertical-align: top可能缓解但无法根除——它只调整对齐位置，不消灭空格节点本身
font-size: 0 在父容器上最稳的现场急救法
让父容器“看不见”那个空格：设 font-size: 0，空格就没了宽度。但子元素文字会跟着消失，所以必须显式重置字号。
- 父容器加
font-size: 0，例如.nav { font-size: 0; } - 每个子元素单独恢复字号，例如
.nav a { font-size: 16px; } - 若子元素含
<input>、<select></select>，它们可能继承异常，需额外指定font-size - 该方案在 IE8+、所有现代浏览器都可靠，不影响可访问性，屏幕阅读器照常读取内容
用 display: flex 一劳永逸替代 inline-block
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失，还能用 gap 精确控制间距。
立即学习“前端免费学习笔记（深入）”；
-
.nav { display: flex; }后，子元素默认水平排列、无间隙、支持justify-content对齐 - 子元素无需再设
display: inline-block，哪怕原来是<span></span>或<button></button>，flex会自动处理布局 - 兼容性注意：IE10+ 支持；若必须兼容 IE9 及更早版本，不能选此方案
- 旧代码若依赖
vertical-align控制对齐，要重写为align-items或align-self
HTML 注释法：零 CSS 成本，适合紧急 patch
当项目限制无法修改样式表，或需要快速修复已上线页面时，用注释“吃掉”空白字符，见效快且兼容性极好。
- 写法：
<div class="item">1</div> <!-- --><div class="item">2</div> <!-- --><div class="item">3</div> - 要点：注释必须紧贴标签，前后不留空格，否则空格还在
- 结构略显杂乱，长期维护成本略高，但所有浏览器都支持
- 特别适合静态 HTML 模板或 CMS 输出不可控的场景
真正难处理的从来不是间隙本身，而是混合场景：比如 <textarea></textarea> 和 <img alt="HTML空格间隙怎么彻底根除？终极排障方案" > 都是行内级元素，但前者因基线对齐产生底部间隙，后者因换行产生左右间隙——它们的成因不同，解决方案也不能混用。别指望一个 font-size: 0 通杀所有“空白”，先看清是哪个环节在生成那个看不见的文本节点。
