gap在Grid中用row-gap控垂直间距、column-gap控水平间距；在Flex中，gap的垂直效果仅当flex-direction: column时生效，且需注意浏览器兼容性及轨道间空间压缩特性。
gap 在 Grid/Flex 中如何控制垂直间距
gap 本身不区分“垂直”或“水平”，它只按布局模型的轨道方向生效：在 display: grid 中，row-gap 控制行轨道之间的空隙（即视觉上的垂直间距），column-gap 控制列轨道之间（视觉上的水平间距）；在 display: flex 中，gap 的行为取决于 flex-direction —— 若为 column，则 gap 值作用于主轴方向，也就是真正的垂直间距。
常见错误是给 flex-direction: row 的容器设 gap: 16px，却期待它拉开上下距离——实际只影响左右。要控制垂直项距，必须：
- 用
flex-direction: column+gap - 或改用
display: grid+row-gap - 避免混用
gap和margin模拟垂直间隔，否则破坏对齐逻辑且易引发 margin 合并
column-gap 对 无效，别白试column-gap 在原生 HTML 表格中完全不起作用，浏览器会静默忽略。这不是兼容性问题，而是规范限制： 是 display: table，而 column-gap 只在 CSS 多列（columns）、Grid 或 Flex 容器中有效。想控制表格列之间的空白，该用：
-
border-collapse: separate + border-spacing: 0 12px（第二值是行间距，第一值才是列间距）
- 若保持
border-collapse: collapse，只能靠 的 padding 拉开内容，列本身无间隙- 强行把
改成 display: grid 会丢失语义、可访问性和默认样式继承，不推荐竖排文本（writing-mode: vertical-rl）中的“垂直间距”其实是列间距
在竖排布局里，“行”概念翻转了：line-height 控制的是字符在垂直方向上的间距（即传统意义上的“列高”），而 column-gap 才真正控制多列之间的横向空隙（此时是视觉上的“垂直”方向空隙）。
例如：
.multi-column {
writing-mode: vertical-rl;
column-count: 3;
column-gap: 40px; /* 这个 40px 是各列之间的“竖向”空隙 */
height: 500px;
}
注意：column-gap 在此场景下生效的前提是启用了多列布局（column-count 或 columns），不是所有竖排容器都自动支持。
gap 简写顺序：行先列后，别记反
gap: 12px 8px 的含义是 row-gap: 12px、column-gap: 8px —— 顺序固定，不可颠倒。这个顺序和 margin 的 top/right/bottom/left 无关，纯属 gap 自身语法。
容易踩的坑：
- 写成
gap: 8px 12px 却以为列间距是 8px，结果垂直间距被设小，内容挤在一起
- 在 Grid 中用
gap: 0 16px 实现“仅列有间隔、行紧贴”，但忘了总高度会因缺失行间隙而变小，导致容器高度计算偏差
- 在 Flex 中使用
gap 时，确认浏览器版本：Safari 14.1+、Firefox 63+、Chrome 85+ 才完整支持；旧版需降级用 row-gap/column-gap 单独写
最常被忽略的一点：gap 插入的是轨道之间，不是元素边缘。它不改变子项自身尺寸，但会压缩它们可用的空间——这点在固定高度容器或 1fr 分配时尤为关键。
的 padding 拉开内容，列本身无间隙 |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
