inline-block元素间4px间隙源于HTML解析器将换行/空格转为文本节点，宽度=父容器font-size的0.25em；彻底消除需设父容器font-size: 0并重置子元素字号，或改用display: flex+gap。
HTML元素间的“空隙”不是CSS没调好，而是源码里的换行符和空格被解析成了真实文本节点——想彻底闭合，得从解析层下手，不是靠狂压margin或padding。
inline-block 元素间 4px 间隙怎么物理消除
这个间隙本质是父容器 font-size 的 0.25em（比如 16px → 4px），浏览器把它当一个不可见但有宽度的字符渲染了。
- 给父容器设
font-size: 0，直接让那个“幽灵空格”失去宽度 - 所有子元素必须显式重置
font-size，否则文字消失；<input>、<select></select>等表单控件也要单独处理，它们继承行为不稳定 - 别只写
.container { font-size: 0; }就完事——漏掉子元素字号，页面就白屏 - IE8+ 和所有现代浏览器都支持，无障碍阅读不受影响
flex 布局下 gap 与空白间隙的关系
用 display: flex 后，HTML 源码里的换行/空格不再生成文本节点，天然无间隙。但注意：gap 是主动加的间距，不是在“修复”什么。
-
gap只作用于 flex 或 grid 容器的直接子元素，不会受源码空白干扰 - 如果旧代码里子元素还挂着
display: inline-block，先去掉——flex 会接管布局，留着反而可能触发意外对齐 - IE10+ 支持
gap，若需兼容 IE9 及更早，不能依赖此方案 - 用
justify-content: space-between时，gap仍生效，二者不冲突
HTML 注释法吃掉空白节点（零 CSS 改动）
适合线上紧急 patch、无法动样式表、或 CMS 模板受限的场景。原理是注释把换行符“包住”，解析器跳过它，不生成文本节点。
立即学习“前端免费学习笔记（深入）”；
- 写法必须紧贴标签：
<div>1</div> <!-- --><div>2</div> <!-- --><div>3</div>，注释前后不能有空格 - 不推荐长期维护——结构杂乱，多人协作时易误删注释导致间隙重现
- 兼容性无敌：从 IE6 到 Chrome 最新版都认
- 动态插入的 HTML（如
innerHTML赋值）里不能写注释，此法仅限静态模板
html-minifier 的 collapseWhitespace 怎么不踩坑
它不是暴力删换行，而是按浏览器解析逻辑压缩块级元素之间的空白，安全但有边界。
- 默认跳过
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style>、<textarea></textarea>内容，这些标签里的换行全保留 - 只压缩块级元素之间的连续空白（比如
<div>\n <p>A</p>\n</div>→<div><p>A</p></div>），不影响<p>Hello World</p>里的单词间距 - 含大量
inline-block的页面，要加conservativeCollapse: false，否则标签间换行仍可能渲染为空隙 - 它不管属性值里的空白，例如
class=" header main "不会被简化——得用正则或 PostHTML 单独处理
真正难的是混合场景：比如一个 inline-block 列表嵌在 flex 容器里，又用了 html-minifier 压缩——此时 font-size: 0 和 gap 的优先级、生效范围容易互相覆盖，得看 DOM 层级和继承链，不能只盯一个配置项。
