為列新增樣式
由於在多列（multicol）容器內建立的列框是匿名框，因此無法單獨為每列設定樣式，但我們可以為列之間的間隙和整個容器設定樣式。本指南將解釋如何更改列之間的間隙和樣式規則。
列間隙
列之間的間隙透過 column-gap 或 gap 屬性控制。column-gap 屬性定義在 多列布局 模組中。gap 屬性定義在 盒模型對齊 模組中。這是一個統一的屬性，用於定義所有支援間隙的佈局（包括 CSS 網格佈局 和 CSS 彈性盒佈局）中盒之間的間隙。
column-gap 的初始值為 1em，這可以防止列相互重疊。在其他佈局方法中，column-gap 作為 gap 的同義詞受支援，但初始值為 0。關鍵字值 normal 將 column-gap 設定為初始值。
您可以使用任何 <length> 值來更改間隙。在下面的示例中，column-gap 設定為 40px。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
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 一樣。
這些屬性應用於作為多列容器的元素，因此所有列都將具有相同的規則。規則只繪製在列之間，而不繪製在外邊緣。規則也只繪製在有內容的列之間。
在下一個示例中，使用長格式值建立了一個 5px 點狀規則，顏色為 rebeccapurple。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-rule-width: 5px;
column-rule-style: dotted;
column-rule-color: rebeccapurple;
}
請注意，規則本身不佔用任何空間：寬規則不會將列推開以騰出空間。相反，規則覆蓋在間隙上。
下面的示例使用了一個非常寬的 40px 規則和 10px 的間隙。規則顯示在列內容的下方。為了在規則兩側留出空間，間隙需要增加到大於 40px。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 10px;
column-rule: 40px solid rebeccapurple;
}
後續步驟
本文詳細介紹了當前所有可以設定列框樣式的方法。在下一個指南中，我們將探討如何使容器內的元素 跨越所有列。