CSS gap 属性
实例
设置网格行与列之间的间隙：
.grid-container { gap: 50px;}
知识兔 »
知识兔 »
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| gap (多列中) | 66 | 16 | 61 | Not supported | 53 |
| gap (网格中) | 66 | 16 | 61 | 10.1 | 53 |
| gap (弹性盒子) | 84 | 84 | 63 | Not supported | 70 |
属性定义及使用说明
gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
注意： CSS 网格布局起初是用 grid-gap 属性来定义的，目前逐渐被 gap 替代。
| 默认值: | normal normal |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.gap="50px 100px" |
语法
gap: row-gap column-gap;| 值 | 描述 |
|---|---|
| row-gap | 设置网格布局中行之间的间隙大小 |
| column-gap | 设置网格布局中列之间的间隙大小 |
更多实例
实例
设置行间距为 20px，列间距为 50px：
.grid-container { gap: 20px 50px;}
知识兔 »
知识兔 »
相关文章
CSS 教程: CSS 网格布局
CSS 参考手册: row-gap 属性
CSS 参考手册: column-gap 属性