column-gap 不生效的根本原因是未启用多列布局，必须配合 column-count 或 column-width 使用；它不支持百分比值，且与 column-rule、子元素 margin 叠加影响视觉间距。
column-gap 不生效，但写了也没反应
常见现象是设了 column-gap: 20px，开发者工具里也显示该样式已应用，可列之间还是紧贴或间距不对。根本原因是：多列布局必须配合 column-count 或 column-width 才能触发，单独写 column-gap 不会激活多列渲染模式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器至少声明了
column-count: 2或column-width: 150px；column-gap只在多列上下文中起作用 - 检查是否误用了
gap（属于 Grid/Flex）——它对多列布局无效，column-gap才是唯一合法属性 - 避免混用
column-rule和column-gap：若column-rule已设边框（如dashed 1px #ccc），视觉间隙 =column-gap+column-rule-width，容易误判为“没生效”
列内容被截断、错位，像突然少了一行
这不是 column-gap 的问题，而是多列布局默认不处理块级元素高度塌陷。典型表现是图片、div 或设置了 height 的子元素导致列高不一致，后续列从错误位置开始分段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给多列容器加
height: auto（显式重置，避免继承的height: 0或min-height干扰） - 对内部图片等替换元素，统一加
break-inside: avoid，防止被硬切到两列之间 - 慎用
float或position: absolute子元素——它们脱离文档流，会破坏列平衡算法
column-gap 设了 20px，但实际看起来远不止
视觉上列间空隙比预期大，常因 column-rule 边框叠加或子元素自身 margin 溢出。多列布局中，column-gap 控制的是列“内容区”之间的空白，不包含边框、也不抑制子元素外边距。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具高亮查看：是
column-gap区域变宽，还是column-rule边框占了空间？后者需调column-rule-width而非column-gap - 给子元素统一加
margin: 0，尤其注意p、h1–h6默认有上下 margin，会在列内撑开额外空白 -
column-gap不接受百分比值（如column-gap: 5%会被浏览器静默忽略），只支持px、em、rem等绝对/相对长度
响应式切换列数时，column-gap 表现忽大忽小
本质不是 column-gap 变了，而是列数变化后，剩余宽度分配逻辑改变。例如从 3 列变为 2 列，总间隙数从 2 个减为 1 个，但容器宽度变大，导致两侧留白增加，中间 gap 看起来“缩了”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
column-count配合媒体查询控制列数，而非依赖column-width自适应——后者受内容长度影响大，列数不稳定 - 若需严格对齐，给容器加
padding-left和padding-right，让左右留白与column-gap解耦 - 不要指望
column-gap响应缩放：它本身是静态值，缩放靠的是视口单位（如column-gap: 2vw），但 vw 在打印或某些 WebView 中行为异常，慎用
column-gap 数值，而是它和 column-rule、子元素 margin、容器 padding 三者在列平衡算法下的叠加反馈。改一个，得盯着另外两个是否还在悄悄拉扯视觉节奏。 
