码农教程 - 一技在手,衣食无忧! tools

目录

CSS column-gap 属性

❮上一节 完整的CSS参考 下一节❯

示例

指定多列布局中的列之间的间隙为 40 像素：

div {
  column-gap: 40px;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个column-gap属性指定网格、弹性盒或多列布局中列之间的间隙。

笔记：如果有一个column-rule列之间，它会出现在间隙的中间。

展示演示❯

默认值： 普通的
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS 框对齐模块级别 3
JavaScript 语法： 对象.style.columnGap="50px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
column-gap (in Multiple Columns) 50 10 52 10 37
column-gap (in Grid) 66 16 61 12 53
column-gap (in Flexbox) 84 84 63 14.1 70

CSS 语法

column-gap: length|normal|initial|inherit;

属性值

Value Description Demo
length A specified length that will set the gap between the columns Demo ❯
normal Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

三栏

将 <div> 元素中的文本分为三列：

div {
  column-count: 3;
}
亲自试一试 »

列规则

指定列之间规则的宽度、样式和颜色：

div {
  column-rule: 4px double #ff00ff;
}
亲自试一试 »

弹性盒布局

在 Flexbox 布局中将列之间的间隙设置为 30px：

#flex-container {
  display: flex;
  column-gap: 30px;
}
亲自试一试 »

网格布局

在网格布局中将列之间的间隙设置为 30px：

#grid-container {
  display: grid;
  column-gap: 30px;
}
亲自试一试 »

相关页面

CSS 教程：CSS 多列

CSS 教程：CSS Flexbox 布局

CSS 教程：CSS 网格布局

CSS 参考：行间距属性

CSS 参考：间隙特性

HTML DOM 参考：列间隙属性


❮上一节 完整的CSS参考 下一节❯