css3 column-gap属性设置多栏布局中的列间距

CSS3 column-gap属性

CSS3 column-gap属性是CSS3多栏布局中用来设置列间距的属性，它可以用来让多栏布局中的列间距更加灵活，从而使布局更加美观。

使用方法

使用CSS3 column-gap属性可以很容易地设置多栏布局中的列间距，只需要在CSS中指定column-gap的值即可，其语法如下：

column-gap:  | normal;

其中，表示列间距的大小，单位可以是px，em，rem等；normal表示使用浏览器默认的列间距，一般情况下，列间距的默认值为1em。

例子

下面是一个使用CSS3 column-gap属性设置列间距的例子：

.container {
    columns: 3;
    column-gap: 10px;
}

上面的代码中，我们设置了.container元素的columns属性为3，表示将其内容分成3列，同时设置column-gap属性为10px，表示3列之间的间距为10px。

注意事项

• column-gap属性只能用于多栏布局，即columns属性不为1时才能使用。
• column-gap属性的值可以是任意数值，但最好不要设置的太小，以免影响列之间的空间分布。
• column-gap属性可以设置为负值，但这样会导致列之间重叠，不建议这样做。