column-gap不生效的根本原因是旧版多列布局依赖column-count/column-width触发，且不兼容inline-block、float等干扰样式；需确保容器为纯文本流、使用现代浏览器支持版本，或用column-rule模拟间隙。
columns 属性设置后，列间距 column-gap 不生效？
常见现象是写了 columns: 3 和 column-gap: 20px，但列之间没空隙，甚至内容被切得特别碎。根本原因是：column-gap 在旧版多列布局中依赖 column-count 或 column-width 触发，且不支持 display: inline-block 或 float 干扰的容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器用
display: column（实际不用设，只需有columns或column-count）且子元素是纯文本流或块级元素（避免浮动/绝对定位） -
column-gap在 Firefox 中从 52+、Chrome 50+、Safari 10.1+ 支持；若需兼容 Safari 9 或更早，改用column-rule模拟间隙（如column-rule: 20px solid transparent） - 不要和
padding或margin混用——column-gap是盒模型外层的逻辑间距，不参与 margin 折叠，也不受box-sizing影响
column-rule 和 column-gap 的边界行为差异
两者都控制列间视觉间隔，但底层机制完全不同：column-gap 是空白区域，不占内容流；column-rule 是绘制在间隙上的“线”，会叠加在 column-gap 之上（如果同时存在）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要需要纯空白（比如响应式卡片流），只用
column-gap；若要加分割线、阴影或虚线效果，优先用column-rule -
column-rule的宽度计入列总宽，可能意外触发换列（例如列宽刚好卡在临界值时）；而column-gap完全不参与宽度计算 -
column-rule-color不能设为transparent来“隐藏”规则线——部分浏览器仍会渲染占位，应直接省略该声明或设为none
多列容器内子元素的 margin/padding 如何影响实际列高？
这是最容易被忽略的盒模型陷阱：多列布局中，子元素的 margin-bottom 不会像普通文档流那样撑开列高，而是被截断或折叠；padding 却会完整保留，并计入列内容高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免依赖
margin-bottom控制段落间距——改用line-height或padding-bottom - 若子元素有
margin-top，首列第一项可能溢出顶部（尤其配合column-fill: auto时），可用margin-top: 0重置 -
break-inside: avoid能防止子元素被跨列切割，但它对 margin 无约束力；真正起作用的是orphans和widows（仅对块级文本有效）
column-fill: balance 与 auto 在 Flex/Grid 容器中的兼容性问题
当多列容器本身是 display: flex 或 display: grid 的子项时，column-fill: balance（默认值）常失效——各列高度严重不均，甚至只剩一列有内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多列布局不推荐嵌套在 Flex/Grid 容器中；若必须，把多列容器设为
display: block并显式设width，避开父容器的尺寸收缩逻辑 -
column-fill: auto可强制顺序填满，但会导致右侧列明显短于左侧，适合新闻摘要类场景；balance在内容量大时才有效，小段文字反而更不均衡 - 没有 JavaScript 就无法动态平衡列高——CSS 多列本质是“内容流切片”，不是“网格对齐”，这点和
grid-template-columns有根本区别
多列布局的盒模型表现，核心就一条：它不遵循常规块盒的 margin 折叠和高度传播规则。所有间距控制必须绕过传统流式思维，直接用列专属属性干预。一旦混入 Flex/Grid 或浮动，几乎必然失控。
