gap仅在display: flex或grid容器上生效，非通用间距工具；加在普通div上无效，必须确保父容器声明对应display值且gap作用于直系子元素间。
gap 在三列布局中只对 display: flex 或 display: grid 容器生效，不是通用间距工具；写在普通 <div> 上没反应，设了也白设。
<h3>gap 必须用在 Flex 或 Grid 容器上才起作用</h3>
<p>很多人把 <code>gap 当成 margin 的替代品，结果加在没设 display: flex 或 display: grid 的父容器上，页面毫无变化。它只控制**直系子元素之间**的间隙，不处理首尾留白、不穿透嵌套、不和 margin 合并。
- Flex 三栏：父容器加
display: flex+gap: 16px，子项自动等距分隔 - Grid 三栏：父容器加
display: grid+grid-template-columns: 200px 1fr 240px+gap: 16px，行列间隙一步到位 - 别给子项再加
margin控制列距——会干扰 Flex/Grid 的空间分配逻辑，尤其在响应式切换时容易错位
gap 单值 vs 双值：列距和行距怎么分开设
三栏布局通常只要列间距，但一旦涉及多行（比如卡片列表、表单字段组），就得区分行距和列距。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 单值写法
gap: 12px：列距 = 行距 = 12px - 双值写法
gap: 8px 16px：**第一个是行距，第二个是列距**（注意顺序，不是“列先行”） - Grid 中可用
row-gap: 8px和column-gap: 16px单独控制，Flex 中仅支持gap（IE11 不支持，需回退用grid-row-gap/grid-column-gap）
为什么不用 margin 而坚持用 gap
用 margin 模拟列间距，三栏布局里至少踩三个坑：
立即学习“前端免费学习笔记（深入）”；
- 末项多出额外空白：最后一列的
margin-right无处抵消，容器宽度被撑大 - 塌陷风险：相邻垂直
margin在 Flex/Grid 外部可能合并，导致实际间距不准 - 响应式失效：媒体查询里改
flex-direction: column后，原来水平方向的margin会变成垂直方向，间距翻倍或错乱 -
gap天然规避这些问题——它由容器统一计算，不依赖子项样式，也不参与盒模型计算
表格里不能用 gap 控制列间距
给 <table> 或 <code><tr> 加 <code>gap 或 column-gap 完全无效。表格不是 Flex/Grid 容器，也不属于 CSS 多列布局（columns），浏览器直接忽略该声明。
- 真要调表格列间空白，得用
border-collapse: separate+border-spacing: 0 10px（列距 0，行距 10px） - 若想保留语义又获得
gap行为，把<table> 改成 <code>display: grid，并用grid-template-columns: repeat(3, 1fr)+gap: 12px重写结构 - 注意：
display: grid会让<tr>/<code><td> 失去原生表格行为，可访问性与打印样式可能受影响 <p>最容易被忽略的是：gap 的生效前提不是“有没有三列”，而是“父容器是不是 Flex/Grid”。哪怕 HTML 结构完全正确，漏掉那一行 <code>display: grid，gap 就只是个摆设。
