column-gap是专为多列布局设计的间隙控制属性，直接作用于columns或grid容器的列与列之间，语义清晰、行为确定；而margin是通用盒模型属性，易受外边距合并、溢出截断等影响，在响应式多列中极易错位。
column-gap 是专为多列布局设计的间隙控制属性
它直接作用于 columns 或 display: column（如 display: grid 配合 grid-template-columns）容器内部的列与列之间，语义清晰、行为确定。而 margin 是通用盒模型属性，用在子元素上时，会受外边距合并（margin collapse）、父容器 overflow 截断、浮动干扰等影响，尤其在响应式多列中极易错位。
常见错误现象：margin-right 在最后一列仍生效，导致容器宽度溢出；margin-bottom 在换行时与下一行首项发生折叠，间距消失。
-
column-gap始终只出现在列之间，不作用于首尾 - 支持
rem、px、em，也支持normal（默认 1em） - 在
display: grid中，column-gap是gap的子集，但单独设置更明确意图
grid-gap / gap 在 Grid 布局中已取代 margin 做行列间距
如果你用的是 display: grid，gap（或旧名 grid-gap）是唯一推荐方式——它同时控制行间隙（row-gap）和列间隙（column-gap），且完全隔离于子项的盒模型之外。用 margin 模拟等效效果，需要给每个子项加条件判断（比如排除最后一列），代码冗余且难以维护。
使用场景举例：三列响应式卡片布局，屏幕缩小时自动变为单列 —— gap 会随列数变化自动调整生效位置；margin 则需配合媒体查询 + :nth-child 手动重置，一不小心就漏掉边界情况。
立即学习“前端免费学习笔记（深入）”；
-
gap不触发外边距合并，也不影响box-sizing -
gap值为0时等价于无间隙，而margin: 0仍可能因继承或重置规则产生副作用 - 注意兼容性：
gap在 Flex 布局中仍不被所有旧版 Safari 支持（Safari ≤ 14.1），但在 Grid 中已全平台稳定
column-gap 和 gap 的行为差异容易被忽略
column-gap 在 columns（多列文本流）和 grid 中都可用，但含义略有不同：前者仅控制文本列之间的空白（不影响子元素自身），后者控制网格轨道之间的空隙（即真实分隔单元格）。而 gap 是更高层的抽象，在 Grid 中等价于同时设 row-gap 和 column-gap。
容易踩的坑：column-gap: 20px 写在 display: flex 容器上完全无效 —— Flex 布局不支持该属性，浏览器静默忽略，不会报错也不会 fallback。
- Flex 布局中实现类似效果，只能靠
margin+:not(:last-child)或伪元素模拟，但无法响应列数变化 -
column-gap在columns: 3文本容器中，间隙是均分在文字流内部的“虚拟列”之间，不改变子元素结构 - 若同时设置了
gap和column-gap，后者会覆盖前者中的列向部分
实际项目中该选哪个？看容器 display 类型
一句话判断：容器是 grid → 用 gap 或 column-gap；是 columns（如新闻正文分栏）→ 用 column-gap；是 flex → 老老实实用 margin 并接受它的限制。
性能上无差异，但可维护性差很多：一个 gap: 16px 可以替代 8 行带选择器的 margin 规则，且后续增减列数时无需改 CSS。
- 别试图用
column-gap控制 Flex 子项间距——它不会生效 - 别在 Grid 中混用
gap和分散的margin，会导致视觉节奏混乱 - 如果设计系统要求“所有间距统一为 8px 基数”，优先把
gap加入原子类（如.gap-2），而不是给每个组件写margin
column-gap 当成万能间隙方案，却没确认父容器的 display 类型是否支持。一粘贴就失效，又回头去调 margin，反而掩盖了布局模型本身的问题。 
