样式化列

列之间的间隙由 column-gap 或 gap 属性控制。column-gap 属性在 多列布局 模块中定义。gap 属性在 盒子对齐 模块中定义。这是一个统一的属性，用于定义所有支持间隙的布局中的盒子之间的间隙，包括 CSS 网格布局 和 CSS 弹性盒子布局。

column-gap 的初始值为 1em，这可以防止列彼此重叠。在其他布局方法中，column-gap 被支持为 gap 的同义词，但初始值为 0。关键字值 normal 将 column-gap 设置为初始值。

可以使用任何 <length> 值更改间隙。在下面的示例中，column-gap 设置为 40px。

column-gap 的允许值为 <length-percentage>，这意味着允许使用百分比。column-gap 的百分比值计算为多列容器宽度的百分比。

规范定义了 column-rule-width、column-rule-style 和 column-rule-color，并提供了简写形式 column-rule。这些属性的工作方式与 border 属性完全相同：任何 <line-style> 都可以作为 column-rule-style 使用，就像有效的 border-style 一样。

这些属性应用于元素（即多列容器），因此所有列都将具有相同的规则。规则仅绘制在列之间，而不是在外部边缘。规则也仅绘制在包含内容的列之间。

在下面的示例中，使用长语法值创建了一个颜色为rebeccapurple、5px 点划线的规则。

请注意，规则本身不占用任何空间：宽规则不会将列分开以腾出空间放置规则。相反，规则会覆盖间隙。

下面的示例使用了一个非常宽的40px规则和一个10px间隙。规则显示在列内容下方。要在这条规则的两侧留出空间，间隙需要增加到大于40px。

本文详细介绍了目前所有可以用来设置列框样式的方法。在下一份指南中，我们将了解如何使容器内的元素跨越所有列。