column-gap就相當于兩列之間的空白處，而column-rule就相當于一條分隔線，換句話說呢？column-gap就像我們web頁面中的margin一樣，而column-rule就類似于border，不過他們只是存在相鄰兩列之間

另外column-gap和column-rule是有高度的，其高度和列等高，最大區別是，column-gap沒有任何樣式，而且他在列與列之間占有一定的空間，而column-rule是有一定的樣式，類似于border一樣（只是能用的相當的少），其在列與列之間不占有任何空間位置

一. 列間距column-gap

語法：column-gap: normal || <length>

取值說明：

- normal為默認值，默值為1em（如果你的字號是px佇值，其默認值為你的font-size值）

- <length>:此值用來設置列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值

上面這個實例是在column-width為auto下，我們把元素分成兩列，并把列與列的間距定為20px，從效果圖中，明顯可以看出，column-gap將相鄰兩列以20px的寬度隔開了。下面在這個例子基礎上加上一個列的寬度值

從效果中很容易得到答案，就是容器無法顯示兩列。因為元素總寬度是400px，現在每列定在193px，總共分成了2列，在前面的例子大家都知道，column-gap為normal時剛好正常以2列并且每列為193px的寬度顯示?？涩F在加上一個列間距20px。這是一個很簡單的數學題，多列各糝數值之各超過多列元素總寬度，以至于元素無法按參數值進行布局

注：這里說這么多，無非想告訴大家column-gap可以用來改變相鄰列之間距離，但在多列元素同時設置了column-width時，column-gap與column-width之和大于多列元素總寬度時，會導至列被撐破，并以第一列顯示，此時的列寬自動調節到元素的總寬度

二. column-rule

在你的腦海中你可以把column-rule當作元素中的border來理解，因為column-rule同樣就具有border類似的屬性：寬度column-rule-width，樣式column-rule-style，顏色column-rule-color，不同的是border占有一定的空間位置，而column-rule不占有任何空間位置

語法：column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>

取值說明：

- column-rule-width：此值是用來定義column-rule的寬度，默認值為“medium”，不允許取負值。類似于border-width屬性

- column-rule-style：此值是用來定義column-rule的樣式，其默認值為“none”，如果取值為默認值時，column-rule-width值將等于“0”，column-rule-style樣式種類和border-style一樣

- column-rule-color：此值用來定義column-rule的顏色，其默認值為前景色color的值，使用相當于border-color，如果不希望顯示顏色，也可以將其設置為transparent(透明色)

上面是一個非常簡單的實例，下面我想在上面的例子基礎上，稍作一下改變，給元素的column-rule-width變大，并同時改變一下元素的color和background值

column-rule-width增大并不會影響列的布局，只會將其往元素兩邊擴展，直到元素邊緣為止，同時也再一次說明column-rule是不占有任何空間位置的；其二，column-rule在z軸上是介于background和content之間的(所以內容文字顯示了，而背景的黃色沒有顯示)

總結：column-gap就類似于元素中的margin和padding，具有一定的空間位置，當其值過大時也會撐破列布局，但和margin,padding不同的是，其只存在列與列之間，并與列高度相等；而column-rule就類似于元素的border，可以設置寬度，邊框樣式，邊框顏色，并且column-rule不具有任何空間位置，同時在z軸介于元素的background和content之間，其同樣具有與列一樣的高度

總結

以上是生活随笔為你收集整理的CSS之Multi-columns的column-gap和column-rule的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。