display: flex能避开幽灵空白，因其切换至弹性盒格式化上下文，使子元素脱离行内流、无视换行/空格及基线对齐机制，从根源上不触发幽灵空白。
Flex布局本身不能“消除幽灵空白”，但能绕过它——因为幽灵空白只在行内格式化上下文中产生，而display: flex直接切换到弹性盒格式化上下文，让inline-block、换行符、空格等不再参与布局计算。
为什么display: flex能避开幽灵空白
幽灵空白的本质是浏览器在行内布局中为“隐形字符”预留的基线对齐空间，它依赖于font-size、line-height和vertical-align共同作用。一旦父容器设为display: flex，子元素就脱离行内流，不再按基线对齐，也不再受换行/空格影响——哪怕你HTML里写成多行+缩进，渲染结果也完全无视那些空白字符。
注意：这不是“修复”幽灵空白，而是换了一套布局引擎，从根源上不触发它。
display: flex后图片底部缝隙还在？检查vertical-align是否残留
即使用了display: flex，如果子元素（比如<img>）仍保留vertical-align: baseline，且父容器恰好有font-size或line-height，某些旧版浏览器（如 Safari 15.2 及更早）可能在计算第一行高度时残留微小偏移。
- 确保
img显式设置vertical-align: top、middle或bottom（推荐top，最稳定） - 避免给flex容器设
line-height（除非真需要控制文字行高），它对flex子项无布局意义，却可能干扰内部文本渲染 - 若容器内混有文字和图片，文字的
font-size仍会影响自身行高，但不会导致图片下方出现缝隙——这点和纯行内布局完全不同
响应式下用flex-wrap时，别误以为gap能控制所有间距
在flex-wrap: wrap场景中，gap只作用于同一行内相邻子项之间（column-gap）或同一列内相邻子项之间（row-gap）。但如果你没设row-gap，换行后的两行之间依然可能因子项高度不一致而视觉错位——这不是幽灵空白，而是flex主轴对齐逻辑导致的。
- 务必显式声明
row-gap来控制行间距，例如gap: 1rem 0.5rem或分开写row-gap: 1rem; column-gap: 0.5rem - Safari 15.4+才完整支持
row-gap在flex-wrap下的表现；Safari 14.1及更早版本会忽略row-gap，需用margin-bottom降级（但要小心与gap叠加） - 不要依赖
justify-content: space-between来“撑开”行间距——它只分配主轴剩余空间，对换行无效
真正容易被忽略的一点：父容器font-size仍可能泄露影响
即便用了display: flex，如果子元素是inline-block或含文本，且你没重置其font-size，那么响应式中父级通过媒体查询动态调整font-size时，子元素内文字的行高、字宽仍会变化——这虽不产生幽灵空白，但可能导致卡片高度抖动、文字溢出等连锁问题。
建议在flex容器上统一用font-size: 1rem（或固定值），子元素内文字按需继承或覆盖；避免用em或rem做图片容器的尺寸基准，除非你明确控制了根字号节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
