CSS3 column-gap 属性

column-gap 属性用于设置多列布局中列与列之间的间距。它可以为一个元素创建多列布局，使得内容可以在多个列中显示，从而实现更加灵活和美观的页面布局。

语法

element {
    column-gap: length | normal | initial | inherit;
}

• length：指定列之间的间距，可以使用像素（px）、百分比（%）或其他长度单位。
• normal：默认值，浏览器会自动计算合适的列之间间距。
• initial：设置为默认值。
• inherit：继承父元素的属性值。

示例

// www.javascriptcn.com code example
/* 设置列之间的间距为20像素 */
.multi-column {
    column-count: 3;
    column-gap: 20px;
}

/* 使用百分比设置列之间的间距 */
.multi-column {
    column-count: 3;
    column-gap: 5%;
}

在上面的示例中，我们创建了一个包含3列的多列布局，并通过设置不同的 column-gap 值来调整列之间的间距。

column-gap 属性可以与其他列布局相关的属性一起使用，如 column-count、column-width 等，来实现更加复杂的布局效果。通过合理地运用 column-gap 属性，可以为网页布局带来更多的可能性和灵活性。