CSS column-gap 属性

定义和用法

column-gap 属性规定列之间的间隔。

注释:如果列之间设置了 column-rule,它会在间隔中间显示。

另请参阅:

CSS3 教程:CSS3 多列

HTML DOM 参考手册:columnGap 属性

实例

规定列间的间隔为 40 像素:

div {
  column-gap: 40px;
}

亲自试一试

页面底部有更多实例。

CSS 语法

column-gap: length|normal;

属性值

描述 测试
length 把列间的间隔设置为指定的长度。 测试
normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 测试

技术细节

默认值: normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.columnGap="40px"

更多实例

Column-count
把 div 元素中的文本划分为三列。
Column-rule
规定列之间的宽度、样式和颜色。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性 Chrome IE / Edge Firefox Safari Opera
在多列中 50 10 52 10 37
在网格中 66 16 61 12 53
在弹性框中 84 84 63 14.1 70