column-gap 设置后没生效？先检查 display 类型
多列布局不是所有 display 值都支持，column-gap 只在启用了多列上下文的容器上起作用。常见错误是直接给 div 加 column-gap 却忘了设 column-count 或 column-width。
-
display: block、display: inline下column-gap完全无效 - 必须配合
column-count（如column-count: 3）或column-width（如column-width: 200px）才能激活多列上下文 -
display: grid或display: flex容器里设column-gap是另一套逻辑，和多列布局无关
column-gap 的单位和默认行为
column-gap 接受长度值（px、em、rem）或 normal（浏览器默认约 1em），它只控制列与列之间的空白，不包含容器内边距或列内容自身的 margin。
- 设为
column-gap: 0会消除列间空隙，但列内容仍可能因自身margin或padding看起来有间隔 - 百分比单位（如
column-gap: 5%）在多列布局中无效，会被忽略，仅支持绝对或相对长度单位 - 该属性不影响首列左侧和末列右侧的留白——那是由容器的
padding或margin控制的
兼容性陷阱：Safari 旧版本要加 -webkit- 前缀
虽然现代 Chrome/Firefox/Edge 都已原生支持 column-gap，但 Safari ≤ 14.1（macOS Big Sur 及更早系统）仍需前缀，否则间隙消失，文字挤成一列。
- 必须同时写两行：
column-gap: 2rem和-webkit-column-gap: 2rem - 不要只依赖 Autoprefixer —— 它对
column-gap的前缀补全不完整，尤其在多列上下文中 - Can I use 数据显示 Safari 15.4+ 才完全移除前缀需求，若项目需兼容 macOS 11/12 用户，前缀仍是刚需
和 column-rule 混用时的视觉叠加问题
当同时设置 column-gap 和 column-rule（比如 column-rule: 1px solid #ccc），规则线会居中落在 gap 区域内，实际占用空间仍算在 column-gap 宽度里，但视觉上“吃掉”了一部分空白。
立即学习“前端免费学习笔记（深入）”；
- 例如
column-gap: 20px+column-rule: 2px solid black→ 两侧各剩 9px 空白，中间 2px 是线 - 若想保持纯空白无分割线，别设
column-rule；若想要明显分隔，column-gap值应比规则线粗得多，否则显得拥挤 -
column-rule不触发重排，但影响可读性——小字号+细线+窄 gap 容易让文本串列
真正容易被忽略的是：多列布局的列高平衡（column-fill: balance）和 column-gap 共同作用时，gap 会参与高度计算，但不会拉伸内容；如果内容总高度不足，最后一列可能短一截，而 gap 依然存在——这时候看起来像“错位”，其实只是列高没填满。
