display: flex能绕过幽灵空白，因其切换至弹性盒格式化上下文，子元素作为flex item被处理，源码中换行符、空格等空白字符被完全忽略，不进入行内格式化上下文（IFC），故从根源上不触发幽灵空白。
为什么 display: flex 能绕过幽灵空白节点
幽灵空白节点本质是 HTML 源码里的换行符、空格被浏览器当作文本节点渲染，只在「行内格式化上下文」（IFC）中生效。而 display: flex 完全不进入 IFC——父容器变成 flex 容器后，子元素一律作为 flex item 处理，源码空白字符直接被忽略，连解析都不解析。
这不是“清除”，是“跳过”。所以它比 font-size: 0 或删换行更彻底，也不影响文字可读性或维护性。
display: flex 消除空白时必须写的三行声明
只写 display: flex 很容易翻车，常见漏项会引入新问题：
-
flex-wrap: nowrap：显式声明，避免子项多时自动换行，产生意外交替行间距 -
gap: 0：虽然规范默认为 0，但 Safari ≤14.0 对gap支持不完整，设成 0 可防 fallback 行为干扰 - 别碰
align-items：保持默认stretch；若改成flex-start或center，子项高度不一致，视觉上像“有间隙”，其实只是对齐方式变了
子元素还带 inline-block 或 margin 怎么办
flex 容器不会帮你重置子元素的旧样式，这些残留才是真·间隙来源：
- 如果子元素原来写了
display: inline-block，必须显式覆盖掉：display: block或干脆删掉这一行——flex item 默认就是block级行为 - 已有
margin的子元素，间隙是它自己撑出来的，不是布局导致的；查 CSS 优先级，确保没被更高权重要素（比如通用选择器或继承）悄悄加了 margin -
margin: auto在 flex 里有居中效果，别误判成“多余空白”；它只在主轴/交叉轴方向生效，且仅当存在可用空间时才起作用
Safari 14.0 以下和 IE 的兼容性现实
这套方案在现代浏览器里稳如磐石，但老环境得提前踩准边界：
- Safari ≤14.0：不支持
gap，但display: flex本身完全可用，幽灵空白照样消失；只是你不能依赖gap控制子项间距 - IE 11 及更早：完全不识别
display: flex，声明会被忽略，回退到原始块流布局，幽灵空白立刻重现；如果仍需兼容 IE，这套方案直接弃用，改用font-size: 0或负 margin
真正容易被忽略的是：flex 布局下，vertical-align 和 line-height 对子元素完全无效——它们只在 IFC 中起作用。这点一旦混淆，排查方向就全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
