column-gap是CSS多列布局中控制列间距的唯一标准属性，仅适用于column-count或column-width触发的多列容器，支持px/em等长度值及normal（≈1em），不支持百分比、负值或calc()，且与gap、margin、padding无关。
column-gap 是多列布局唯一合法的间隙属性
在 CSS 多列布局（column-count 或 column-width 触发）中，column-gap 是控制列与列之间空白的**唯一标准方式**。它不是“可选方案”，而是规范强制要求的属性——其他如 gap、margin、padding 在该上下文中完全无效或产生副作用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见错误是把 column-gap 写在 <table> 或普通 <code><div> 上，结果没反应。必须满足两个前提：容器设置了多列（如 <code>column-count: 3），且自身是块级元素（默认即满足）。
-
column-gap只接受长度值（px、em、rem）或normal（约 1em，不建议依赖） - 不支持百分比，也不支持负值
- IE 完全不支持；Edge 10+、Chrome 50+、Firefox 52+、Safari 9+ 支持良好
- 若同时设了
column-rule，column-gap控制的是规则线两侧到内容的距离，不是规则线宽度
column-gap 和 gap 完全不是一回事
gap 是 Flex/Grid 的布局属性，column-gap 是多列布局专用属性——它们名字像，但生效条件、作用域、浏览器解析逻辑都不同。混用会导致预期外行为。
比如：display: grid; column-gap: 20px 不起作用，因为 Grid 下应使用 gap 或 column-gap（Grid 中的 column-gap 是 gap 的子集，但语法等价于 gap: auto 20px）；而 columns: 3; gap: 20px 则被忽略，浏览器直接丢弃该声明。
立即学习“前端免费学习笔记（深入）”；
- 多列布局只认
column-gap，不认gap - Flex/Grid 容器中，
column-gap是gap的别名（仅当未设row-gap时），但语义不如直接写gap清晰 - 不要给多列容器加
display: flex或display: grid来“启用 gap”——这会彻底关闭多列行为，内容变成单行或单格
响应式多栏间距怎么调才稳
多列布局的核心优势是内容自动流动，但 column-gap 本身不响应式。要实现不同屏幕下不同列间距，必须配合媒体查询手动切换值，不能靠百分比或 calc() 动态计算（column-gap 不支持 calc 表达式）。
典型做法是：小屏单列（column-count: 1）+ 零间隙；中屏双列 + 适中间隙；大屏三列 + 更宽松间隙。注意列数变化时，column-gap 值也应阶梯调整，避免窄列配大间隙导致内容被挤出可视区。
- 移动端慎用
column-gap > 12px，易造成横向滚动 - 若内容含图片或
<pre class="brush:php;toolbar:false;"></pre>等宽元素，需额外加break-inside: avoid，否则column-gap再大也拦不住截断 - Firefox 对
column-gap的渲染略保守，有时需加-moz-column-gap前缀保兼容（尽管现代版本已基本不需要）
column-gap 设为 0 还有间隙？检查 column-rule 和字体渲染
设了 column-gap: 0 却仍有可见空隙，大概率是以下两个原因：
- 误加了
column-rule，比如column-rule: 1px solid #ccc，这条“分隔线”本身占空间，且默认居中，左右各留出半像素空白 - 中英文混排或字号过小（如
font-size: 12px）时，浏览器字形渲染可能引入亚像素偏移，视觉上像有间隙 - 父容器设置了
padding或子元素有border，被误认为是列间隙
调试时打开 DevTools 的“Layout”面板，勾选“Show layer borders”，确认间隙是否来自 column-gap 计算，还是其他盒模型属性叠加所致。
真正容易被忽略的是：多列布局没有“列内对齐”概念，column-gap 只管列间，不管内容在列内如何贴边或居中——那得靠 text-align 或 padding 单独控制。
