CSS row-gap 属性

row-gap 属性用于设置元素的行间距。它可以在垂直方向上控制元素之间的空间。

语法

row-gap: <length> | <percentage> | normal;

取值

• <length>：用长度值表示行间距。默认值是0。
• <percentage>：用百分比值表示行间距。相对于包含块的宽度。
• normal：默认值。表示使用浏览器自带的行间距。

实例

HTML

<div class="box">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
</div>

CSS

.box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px; /* 设置行间距 */
}

.item {
  background: #f5f5f5;
  padding: 20px;
  text-align: center;
}

在上述示例中，我们设置了一个网格容器，有2列和4行，然后使用 row-gap 属性为网格项设置了20像素的间距。

注意事项

• row-gap 属性只能用于 grid 和 flexbox 布局中。
• row-gap 属性不会影响元素本身的尺寸，只能影响元素与其他元素之间的间距。
• row-gap 属性和 grid-row-gap 属性作用相同，只是后者只能用于网格布局中。