gap仅作用于直接子项之间，不向下传递；嵌套容器需单独设置gap；仅支持grid/flex容器；IE不支持，旧版Safari对flex gap支持有限。
gap 不会自动向下传递到子容器内部
很多人误以为给父容器设了 gap，它的所有后代网格或弹性子项都会“继承”这个间距。实际上，gap 只作用于**直接子项之间**，对子项内部的布局完全无影响。比如一个 display: grid 容器设置了 gap: 12px，它的直系子元素（grid items）之间会有 12px 空隙；但如果某个子元素自己也是 display: grid，它内部的空隙必须单独设置 gap，不会从父级“漏下来”。
常见错误现象：
– 父容器加了 gap: 16px，但嵌套的卡片组件内图标和文字依然紧贴
– 使用 CSS Grid 布局多层表单时，字段组之间有间距，但每组内的 label 和 input 却没空隙
- 只有显式声明
display: grid或display: flex的容器才支持gap -
gap在 Flex 布局中仅对主轴生效（即row-gap有效，column-gap在单行 Flex 中常被忽略） - IE 不支持
gap，如需兼容，得用margin模拟（注意最后一项的额外 margin 问题）
grid-template-areas 中 gap 仍生效，但不参与区域计算
当你用 grid-template-areas 定义语义化布局区域时，gap 依然控制区域之间的物理间距，但它**不改变区域名称的逻辑位置**。也就是说，即使你设了 gap: 20px，"header header" "main sidebar" 这样的模板写法不变，浏览器会自动在 header 和 main 之间、main 和 sidebar 之间留出 20px 空白，而不会把 gap 当作一个“隐式轨道”塞进模板字符串里。
使用场景：
– 构建仪表盘，顶部 header 区域与下方 main 区域需保持视觉呼吸感
– 多列内容区（如 "content ads"）需要固定侧边栏间距，又不想手动算 grid-column 起止线
-
gap的值会影响整体容器高度/宽度，但不会导致grid-area名称错位或溢出 - 若某区域跨多行（如
"header header" "header header"），row-gap仍只出现在区域块之间，而非每一行之间 - 避免混用
gap和负margin：后者可能破坏grid-template-areas的渲染一致性
gap 在嵌套 grid + flex 混合布局中的行为差异
当外层是 display: grid、内层是 display: flex（或反过来）时，gap 的作用边界非常明确：它只属于当前容器的布局上下文。Flex 容器的 gap 不会“穿透”到其父 grid 的轨道间隙中，反之亦然。
容易踩的坑：
– 给外层 grid 设 gap: 1rem，又给某个 flex 子项设 gap: 0.5rem，结果发现 flex 内部间距正常，但该 flex 容器和其他 grid item 之间的距离仍是 1rem（不是 1rem + 0.5rem）
– 用 gap 对齐多个卡片（grid），卡片内部用 flex 排图标+文字，却忘了给 flex 加 gap，导致所有卡片内部样式一致缺失
- Flex 的
gap在 Safari 14.1+ 才稳定支持，旧版需用margin配合:not(:last-child) - Grid 的
gap可以分别用row-gap和column-gap精确控制，Flex 则推荐直接用gap（等价于两者同时设） - 不要指望
gap能替代 padding：它不推挤容器内边距，也不影响 border-box 计算
gap 与 justify-content / align-content 的协作关系
gap 是间距控制，justify-content 和 align-content 是对齐控制，二者共存时互不干扰，但视觉效果会叠加。例如，在多行 grid 中设 row-gap: 20px 同时设 align-content: center，浏览器先按 gap 分配行间空隙，再把整组行块在容器中居中——gap 的像素值会被计入总高度，然后参与居中计算。
性能提示：
– gap 是纯渲染属性，不影响重排（reflow），比用 margin 实现同类效果更轻量
– 但若配合 justify-content: space-between 使用，某些浏览器在动态增删子项时可能触发更频繁的重绘（paint）
- 在 flex 单行布局中，
align-content无效，此时gap仅受justify-content影响（如space-around会把 gap 算进分配逻辑） - grid 中若只有一行或一列，
align-content或justify-content对 gap 无实际干预，但代码保留无害 - 动画
gap值本身不被浏览器硬件加速，如需流畅过渡，建议搭配transform或控制 opacity
真正容易被忽略的是：当你用 JS 动态插入新子项时，gap 会立刻生效，但若该子项本身是另一个带 gap 的容器，它的内部间距不会因为父级 gap 变化而重新计算——两层 gap 的叠加完全是静态、独立的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
