CSS row-gap 属性
css3基础 2023-07-30 16:21:30小码哥的IT人生shichen
CSS row-gap 属性
定义和用法
row-gap 属性规定弹性框或网格布局中行之间的间隙。
row-gap 属性以前称为 grid-row-gap。
另请参阅：
CSS 教程：CSS 网格布局
CSS 教程：CSS 弹性框布局
CSS 参考手册：gap 属性
CSS 参考手册：column-gap 属性
实例
例子 1
规定网格行之间的 50 像素间隙：
#grid-container {
display: grid;
row-gap: 50px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 3px;
margin: 3px;
}
#grid-container {
border: 1px solid black;
background-color: mintcream;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 50px;
}
#grid-container > div {
background-color: yellow;
}
</style>
</head>
<body>
<h1>row-gap 属性</h1>
<p>row-gap 属性定义网格行之间的间隙：</p>
<div id="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2：弹性框布局
在弹性框布局中将行间距设置为 70px：
#flex-container {
display: flex;
row-gap: 70px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
border: 1px solid black;
background-color: rgb(255, 230, 251);
display: flex;
flex-wrap: wrap;
row-gap: 70px;
}
#flex-container > div {
border: 1px solid black;
width: 10%;
aspect-ratio: 2;
padding: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>在弹性框布局中使用 row-gap 属性</h1>
<p>使用 row-gap 属性指定弹性框布局中行之间的间隙大小。</p>
<p>这个弹性框布局在行之间有 70px 的间距：</p>
<div id="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
row-gap: length|normal|initial|inherit;
| 值 | 描述 |
|---|---|
| length | 设置行之间间隙的指定长度或百分百值。 |
| normal | 默认值。规定行之间的正常间隙。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值： | normal |
|---|---|
| 继承： | 否 |
| 动画制作： | 支持。请查看单独的属性。请参阅：动画相关属性。 |
| 版本： | CSS Box Alignment Module Level 3 |
| JavaScript 语法： | object.style.rowGap="50px" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 布局 | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 在网格中 | 66 | 16 | 61 | 12 | 53 |
| 在弹性框中 | 84 | 84 | 63 | 14.1 | 70 |
