CSS row-gap 属性
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
属性作用相同,只是后者只能用于网格布局中。