Flex容器未生效导致gap无效，首要确认computed中display是否为flex或inline-flex且无覆盖；gap仅对真正启用的flex/grid容器有效，旧版Safari需回退margin方案，HTML换行符、align-content默认stretch及图片baseline对齐均会产生非gap间隙。
flex容器没生效，gap设了也白搭
很多情况你以为写了 display: flex 就万事大吉，但 computed 样式里看到的却是 display: block——说明被后续规则覆盖，或者父级用了 float、position: absolute，直接破坏了 flex 上下文。gap 只对真正启用的 flex 或 grid 容器有效，普通 div 加 gap 属性完全被忽略。
检查方式：打开开发者工具 → Elements 面板 → 选中父容器 → 看 Computed 标签页里的 display 值是否为 flex 或 inline-flex，且无 strikethrough。
- 常见干扰项：
display: inline-block残留、CSS-in-JS 动态覆盖、CSS Modules 类名冲突 - 旧版 Safari（≤14.0）不支持
gap，需用margin回退方案 - 若用了
flex-wrap: wrap，gap同时影响行距和列距，别误以为只管横向
HTML 换行和空格产生的“幽灵间隙”
两个 <li> 写在不同行，中间的换行符会被浏览器渲染成一个文本节点，占位约 3–4px——这跟 gap、margin 都无关，纯 DOM 结构问题。Flex 容器虽忽略空白字符对布局的影响，但该文本节点仍会参与行内格式化，尤其当子项是 inline 或 inline-block 时更明显。
- 删掉 HTML 中子元素间的换行与空格：
<li></li><li></li>连写 - 父容器设
font-size: 0，子项再单独设font-size（注意<span>等内联元素会继承失效） - 用
display: contents包裹注释或空格节点（Chrome 65+/Firefox 63+ 支持，不兼容 IE）
多行 flex 下的行间空白不是 gap，是 align-content
启用了 flex-wrap: wrap 后，如果列表项换行，行与行之间出现“莫名其妙”的空白，问题不在子项间距，而在行本身如何排列。此时 align-content 才是关键——它控制的是“行”在交叉轴上的分布，默认值 stretch 会让每行拉满容器高度，造成视觉空隙。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
align-content: flex-start：所有行贴顶部排列，彻底消除行间空白（最常用） -
align-content: space-between或space-around：主动分配行间空间，反而加剧空白 - 该属性仅在多行 flex 容器中起作用，单行时无效
- 别和
align-items搞混：align-items控制单个子项在交叉轴上的对齐，align-content控制的是“行”的位置
图片/文字基线对齐导致的底部空白
列表项里含 <img> 或内联文本时，它们默认按 baseline 对齐，下方会预留 descender 空间（比如字母 g、y 的下延部分），形成“底部空白”。这不是间距问题，是字体排版行为。
-
img加display: block，直接移除基线对齐逻辑 - 保留内联，改用
vertical-align: top或middle - 检查父容器是否继承了
line-height或过大font-size，会放大该间隙 - 调
gap: 0或margin: 0完全无效——得从渲染层切断基线对齐
真正难处理的不是某一种间隙，而是多种来源叠加：HTML 空白 + 基线对齐 + align-content 默认 stretch + 子项自带 margin，四者混在一起时，光看渲染结果根本分不清谁在作怪。动手前先用开发者工具高亮布局框，逐层关闭 CSS 属性，比猜快得多。
