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 时更明显。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 删掉 HTML 中子元素间的换行与空格：<li> <li> 连写
• 父容器设 font-size: 0，子项再单独设 font-size（注意 <span></span> 等内联元素会继承失效）
• 用 display: contents 包裹注释或空格节点（Chrome 65+/Firefox 63+ 支持，不兼容 IE）

多行 flex 下的行间空白不是 gap，是 align-content

启用了 flex-wrap: wrap 后，如果列表项换行，行与行之间出现“莫名其妙”的空白，问题不在子项间距，而在行本身如何排列。此时 align-content 才是关键——它控制的是“行”在交叉轴上的分布，默认值 stretch 会让每行拉满容器高度，造成视觉空隙。

• 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 属性，比猜快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！