gap：项之间的固定间距，以及在缝里画线
gap（及 row-gap / column-gap）在 flex / grid 的项之间开一道固定间距：只落在缝里、不碰首尾、不参与剩余空间分配（先扣掉间距再让 grow/shrink 分配 free）。比起以往用
margin 拼间距，它省去了「最后一项多一截」的修补。本页先实测 gap 与 margin 的差别，再看 CSS Gaps Module Level 1 的新能力——gap decorations：直接在这些缝里画分隔线(column-rule / row-rule)。
1 · gap vs margin：间距落在哪里
两条轨道相同项数、相同间距值：上轨用 gap，下轨用 margin 拼。观察 margin 轨如何把首尾也推离容器内边（还需容器负 margin 或 :first/:last-child 修补），而 gap 轨首尾正好贴边。
三条容易踩的点。 其一，gap 是 row-gap column-gap 的简写，单值时两轴相同；flex 多行时 row-gap 管行间、column-gap 管项间。其二，gap 不参与 justify-content 的剩余空间分配——它叠加在对齐之上（space-between
再加 gap 仍生效）。其三，normal 在 flex/grid 解析为 0，在 multicol 才是 1em。
2 · gap decorations：在缝里画分隔线
CSS Gaps Module Level 1 把 multicol 时代的 column-rule 扩展到 flex / grid，并补上 row-rule：在 gap 中线绘制分隔线，纯视觉、不占布局（不挤动任何项），从此无需 border 或 ::after 伪元素拼分隔线。column-rule-* 与
row-rule-* 是各自独立的 longhand（rule / rule-style 等简写只是一次写两轴），因此列线与行线的 style / width / color 可以不一致。下面先选「编辑哪一轴」再调 style / width / color，另有容器 gap、用 repeat() 让
column-rule-width 逐缝变化（分组线），以及 gap-rule-paint-order 决定行线列线在交点谁压上。下方 lab 顶部横幅标明本浏览器走原生绘制还是 JS 模拟绘制。
3 · gap decoration 属性一览
| 属性 | 取值 | 初始 | 说明 |
|---|---|---|---|
column-rule / row-rule |
<width> <style> <color> |
medium none currentcolor |
简写，分别画列间（竖）与行间（横）分隔线；rule 一次设两者。 |
*-rule-style |
none / solid / dashed / dotted / double / … |
none |
与 border-style 同族；默认 none 即不画。 |
*-rule-width |
<line-width> |
medium |
线宽。 |
*-rule-color |
<color> |
currentcolor |
线色。 |
*-rule-break |
none / normal / intersection |
normal |
遇到跨多轨的项时是否断线。flex 下 normal 等同 none（不断）;grid 才有 T / 十字交点的断法。
|
*-rule-inset-{cap,junction}-{start,end} |
<length-percentage> / overlap-join |
0 |
线段端点的内缩量，分别针对非交点端 (cap) 与交点端 (junction) 的起 / 止；overlap-join 让相邻线段在交点无缝相接。规范由早期单一 *-rule-outset 重构为这一组,Chrome 早期实现仍用 outset。
|
rule-visibility-items |
可见性关键字 （item 之间 / 容器边缘缝） | — |
控制装饰画在哪些缝：仅 item 之间，还是也画到贴容器内边的边缘缝。 |
rule-overlap |
重叠行为关键字 | — |
相邻装饰在交点处的重叠 / 合并行为。 |
gap-rule-paint-order |
row-over-column / column-over-row |
row-over-column |
行线与列线在交点处谁压在上面 （本页 lab 可切换实测）。 |
repeat() 让 rule 成为图案。 width / style / color 都接受 repeat()，可按缝逐条变化：例如 column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 画出「细细粗细细」的分组线（数独九宫格那种）。这把以往需要逐个
::after 才能做的分组分隔线压成一行声明。
支持状态（截至 2026）。 gap decorations 仍是实验特性：Chrome / Edge 139+ 需在 chrome://flags 开 Experimental Web Platform Features 旗标。lab 顶部横幅以当前浏览器实测为准；若未原生支持，上面的演示改用 JS 在 gap 中线绘制等效线段（getBoundingClientRect
定位），仅作效果示意。这类需求在原生落地前的传统解法(border / ::after)也见于 滚动容器丢 padding 一页。
4 · 🔗 延伸
- CSS gap decorations · developer.chrome.com — Chrome 团队对 column-rule / row-rule / repeat() 的介绍与示例（数独九宫格分组线）。
- CSS Gaps Module Level 1 · W3C / CSSWG — gap 间距与 gap decorations 的规范全文：rule-break、rule-outset、rule-inset、paint-order 的精确语义。
- MDN · gap · developer.mozilla.org — gap / row-gap / column-gap 在 flex / grid / multicol 的取值与 normal 解析。