inline-block元素间4px间隙源于html解析器将换行/空格转为文本节点，其宽度=父容器font-size的0.25em；可用font-size:0+子元素重置字号、display:flex或html注释法消除。
HTML格式化导致的间隙不是CSS没写对，而是浏览器把换行符和空格当成了真实文本节点——它真在那儿，只是你看不见。
inline-block 元素间 4px 间隙从哪来
只要两个 inline-block 元素在 HTML 源码里换行或留空格，浏览器就会生成一个文本节点，内容就是那个空格。这个空格的宽度 = 父容器当前 font-size 的 0.25em（比如 font-size: 16px 时，就是 4px）。
常见错误现象包括：nav 菜单项错位、img 栅格对不齐、按钮组中间漏白线；开发者工具里看盒模型，明明没设 margin，元素间却有固定间距。
- 只影响
display: inline和display: inline-block元素，block或flex容器里完全不生效 - 不同浏览器渲染值略有差异：Chrome 约 5px，Firefox/IE 约 4px，部分国产浏览器可达 8px
- 动态插入（如 jQuery
.html()拼接无换行字符串）不会触发此问题，因为没生成空白文本节点
font-size: 0 是最稳的现场急救法
核心逻辑：让父容器“看不见”那个空格——把字体大小设为 0，空格就没了宽度。但子元素文字会跟着消失，所以必须显式重置。
- 给父容器加
font-size: 0，例如.button-group { font-size: 0; } - 每个子元素单独设回正常字号，例如
.button-group > button, .button-group > input { font-size: 14px; } -
input[type="number"]、select等表单控件需额外确认placeholder和内部文字是否正常显示 - 该方案在 IE8+ 和所有现代浏览器中可靠，不影响可访问性
display: flex 是一劳永逸的解法
放弃 inline-block，直接让父容器走弹性布局，间隙天然消失，还能用 gap 精确控制间距。
- 父容器设
display: flex后，子元素默认水平排列、无间隙、支持对齐 - 子元素无需再设
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> - 注释必须紧贴标签，前后不留空格，否则空格还在
- 结构略显杂乱，长期维护成本略高，但兼容性极好（所有浏览器）
- 注意和 HTML 压缩工具冲突——有些压缩器会删掉注释，导致间隙重现
真正容易被忽略的是：间隙只在特定布局上下文中存在，它不随你调 margin 或 padding 改变；而一旦你误判成样式问题去硬调负边距，反而会在不同浏览器上出现不一致表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
