gap设为0却仍有间隙，需确认父容器是否真正启用flex布局；换行后行间空白由align-content默认stretch导致，应设为flex-start；3px“幽灵间隙”源于html文本节点，可通过删空格、font-size:0或display:contents解决；图片底部空白是baseline对齐所致，应改display:block或vertical-align。
gap设为0却仍有间隙？先确认flex上下文是否真实生效
很多所谓“gap不生效”的问题，根源是父容器压根没进入flex布局上下文。浏览器开发者工具里看computed样式，display必须是flex或inline-flex，且不能被后续规则（比如display: block）覆盖。常见干扰项包括：float、position: absolute、外层display: contents未正确透传，或CSS-in-JS中样式注入顺序错乱。
另外注意：gap只对flex和grid容器有效，普通div加gap纯属无效声明。
换行后行与行之间有空白？align-content不是可选项，是必调项
当flex-wrap: wrap启用后，若未显式设置align-content，默认值stretch会让每一“行”（flex line）在交叉轴上拉满容器高度，造成行间视觉空隙——这不是bug，是规范行为。
-
align-content: flex-start让所有行贴顶部排列，消除行间空白 -
align-content: space-between或space-around会主动分配行间空间，反而加剧空白 - 该属性仅在多行flex容器中起作用，单行时无效果
子项间有3px左右“幽灵间隙”？不是gap，是HTML文本节点在作祟
明明没写gap、没设margin，两个div并排却有不可解释的缝隙，大概率是HTML里换行符或空格被渲染成文本节点所致。这种间隙与flex无关，也绕过所有盒模型控制。
解决方式有三：
- 删掉子元素间的换行和空格，写成
<div></div> <div></div>连写形式 - 父容器设
font-size: 0，子项再单独设font-size（注意内联元素如span会继承失效） - 用
display: contents包裹注释或空格节点（Chrome 65+/Firefox 63+支持）
图片底部空白、文字基线对齐导致的间隙？别碰gap，先改display
如果flex项目里含<img>或内联元素，它们默认按baseline对齐，下方会留出descender空间，形成“底部空白”。这不是间距问题，是排版行为。
最直接解法：
-
img加display: block，彻底移除基线对齐逻辑 - 或保留内联，改用
vertical-align: top/middle - 若父容器有继承的
line-height或font-size，也会放大该间隙，需一并重置
这类间隙和gap、margin完全无关，调再多次gap: 0也没用——得从渲染层源头切断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
