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 对 <table> 无效，别白试<p><code>column-gap 在原生 HTML 表格中完全不起作用，浏览器会静默忽略。这不是兼容性问题，而是规范限制：<table> 是 <code>display: table，而 column-gap 只在 CSS 多列（columns）、Grid 或 Flex 容器中有效。
想控制表格列之间的空白，该用：
立即学习“前端免费学习笔记（深入）”；
-
border-collapse: separate+border-spacing: 0 12px（第二值是行间距，第一值才是列间距） - 若保持
border-collapse: collapse，只能靠<td> 的 <code>padding拉开内容，列本身无间隙 - 强行把
<table> 改成 <code>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分配时尤为关键。 - 写成
