行间距 | CSS-Tricks

CSS 中的 row-gap 属性用于设置 CSS 网格、Flexbox 和 CSS 列布局中行之间的间距（正式称为“槽”）。

您可以将 row-gap 视为 grid-row-gap 的“下一代”或继承者，后者最初是在 CSS 网格布局规范中定义的。为了扩展网格的这一特性，使其也适用于 flexbox 和 columns，因此去掉了 grid- 前缀。这样它就不再特定于网格了。

但是，如果您已经使用过 grid-row-gap（以及 grid-gap 和 grid-column-gap），那么这有点麻烦，因为这意味着我们需要支持带前缀的版本，直到每个浏览器都切换过来。实现这一目标的未来证明方法是在 row-gap 之前声明带前缀的属性。这样，支持它的浏览器就会使用它，不支持的浏览器就会向上提升到下一级并获得它们所需的内容。

.something {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 2rem; /* Will be used instead by browsers that do not support `row-gap` */
  row-gap: 2rem; /* Used by browsers that support `row-gap` */
}

语法

row-gap: normal | <length-percentage>

初始值：normal
应用于：多列容器、Flex 容器、网格容器
继承：否
百分比：指内容区域的对应尺寸
计算值：指定的关键字，否则为计算的 <length-percentage> 值
动画类型：根据计算值类型

此语法表示 row-gap 接受 normal 值（这是默认值）或以单位（例如 40px）或百分比（例如 5%）表示的特定长度。

值

除了 normal 值之外，row-gap 还接受数字和百分比。“Normal”表示浏览器的标准值。

/* Default value */
row-gap: normal;

/* <length> values */
row-gap: 50px;
row-gap: 2rem;
row-gap: 1.5em;
row-gap: 5vw;
row-gap: 25ch;

/* <percentage> value */
row-gap: 15%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;