gap仅在flex或grid容器上生效，控制直系子元素间间隙；单值设统一间距，双值首为行距、次为列距；不与margin合并，但可叠加；需用padding或margin处理首尾留白。
gap 只能在 display: flex 或 display: grid 容器上生效，直接写在普通 <p> 或 <div> 上毫无作用。
gap 必须配合 Flex 或 Grid 布局才能用
很多人把 gap 当成通用“间距工具”，结果加在普通块元素上没反应。它不是 margin 的替代品，而是容器级布局属性——只控制**直系子元素之间**的间隙，不涉及父容器边缘或嵌套子项。
- Flex 容器中：
gap同时影响主轴（如水平排列时的左右）和交叉轴（垂直方向的上下），flex-wrap: wrap时也生效 - Grid 容器中：
gap等价于row-gap+column-gap，对行列间隙分别作用 - 多列布局（
columns）也支持gap，但兼容性略弱，实际项目中较少用 - IE 完全不支持
gap；Edge 16+、Chrome 84+、Firefox 63+、Safari 14.1+ 才稳定可用
gap 的值怎么写才不出错
单值写法最常用，但双值语法容易混淆顺序：第一个是**行间距**（row-gap），第二个是**列间距**（column-gap），和 margin 的“上右下左”完全无关。
-
gap: 12px→ 行、列间距都是 12px -
gap: 8px 16px→ 行间距 8px，列间距 16px（不是“上下/左右”） -
gap: 0或gap: unset可显式关闭，默认值是normal（约等于1em，但行为不稳定，别依赖） - 单位必须明确，
gap: 1无效；gap: 1rem、gap: 2%（仅 Grid 中列间距支持百分比）都合法
gap 和 margin 混用时的坑
在 Flex/Grid 容器里，gap 不会和子元素自身的 margin 合并，但两者叠加可能导致意外空隙——尤其是当子元素自己设了 margin-bottom，又遇上容器 gap，视觉上会变大。
立即学习“前端免费学习笔记（深入）”；
- 调试时优先清空子元素的
margin，只靠gap统一控制，逻辑更干净 - 若必须混用（比如某个子项需要额外偏移），注意
gap不作用于首尾项与容器边缘之间，而margin会撑开整个容器尺寸 - 外边距合并（margin collapse）在
gap场景下**不存在**——这是它比margin更可预测的关键优势 - 用浏览器 DevTools 查看“Computed”面板，确认生效的是
gap还是子元素的margin，避免误判
为什么 row-gap / column-gap 有时比 gap 更合适
当需要不对称控制，比如卡片列表垂直紧凑、水平宽松，或表格式布局中行距小、列距大，单独使用 row-gap 和 column-gap 更直观，也方便媒体查询中独立响应。
-
row-gap: 12px; column-gap: 24px;比gap: 12px 24px语义更清晰，维护时一眼看懂意图 - 部分旧版 Safari（14.0）对双值
gap支持有 bug，但单属性row-gap/column-gap更稳 - 如果未来要动态修改某一个方向的间距（比如 JS 控制
element.style.rowGap = '8px'），只能用单属性 - 注意：
row-gap在 Flex 容器中只在flex-direction: column或wrap换行后才真正体现为“行间”；默认row方向时，它实际影响的是换行后的垂直间隔
最容易被忽略的是：gap 不解决“第一个子元素顶部”或“最后一个子元素底部”的留白问题——那得靠容器自身的 padding，或者子元素的 margin 来补足。
