CSS 是 Web 開發中的強大工具，它允許開發人員為網頁上的文字內容建立多列佈局。分欄是將長文本區塊分解為更易於管理的區塊的有效方法。 CSS 列的一個重要方面是它們之間的間隙。
下面是在 CSS 中設定列之間間隙的多種方法中的某些方法。
column-gap 屬性是設定列之間間隙最常見的方法。此屬性設定多列佈局中列之間的間距。它是一個簡寫屬性，結合了column-rule-width 和column-rule-style 屬性。例如 -
.column-container {
column-count: 3;
column-gap: 20px;
}
在上面的CSS程式碼中，為了建立三列，我們將column-count屬性設為3，並將column-gap屬性設為20像素以設定中心間隙。
為列間隙設定固定像素值。
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightgray;
}
h2 {
text-align:center;
}
.column-container {
column-count: 3;
column-gap: 20px;
column-rule: 3px solid;
}
</style>
</head>
<body>
<h2>Setting the column gap using the column-gap Property</h2>
<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
</div>
</body>
</html>
gap屬性是一種新的CSS屬性，它在CSS Grid中引入。我們也可以使用它來設定列之間的間隔。這是一個縮寫屬性，允許開發人員將row-gap和column-gap屬性組合在一起。例如 -
.column-container {
column-count: 4;
gap: 15px;
}
在上面的CSS程式碼中，為了建立四列，我們將column-count屬性設為4，並將column-gap屬性設為15像素以設定中間間隙。
使用間隙屬性設定列間隙的固定像素值。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
h2 {
text-align: center;
}
.column-container {
column-count: 4;
gap: 15px;
column-rule: 3px dotted;
}
</style>
</head>
<body>
<body>
<h2>Setting the column gap using the gap Property </h2>
<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</body>
</html>
CSS變數是自訂屬性，為多列佈局中設定列之間間隙提供了一種靈活的方式。它允許開發人員定義可重複使用的值。例如：
:root {
--column-gap: 20px;
}
.column-container {
column-count: 3;
column-gap: var(--column-gap);
}
在上面的 CSS 程式碼中，我們定義了一個名為 --column-gap 的 CSS 變量，並將其值設為 20 像素，並在 var() 函數中呼叫它。為了建立三列，我們將 column-count 屬性設為 3。
使用CSS變數為列間距設定固定像素值。
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightgray;
}
h2 {
text-align:center;
}
.my-container {
column-count: 3;
column-gap: var(--column-gap);
column-rule: 3px dotted;
}
</style>
</head>
<body>
<h2>Setting the column gap using the CSS variable</h2>
<div class="my-container" style="--column-gap: 20px";>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
<p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
</div>
</body>
</html>
在上面的文章中，我們討論了幾種設定列之間列間隙的方法，包括column-gap屬性、gap屬性和CSS變數。總的來說，在 CSS 中設定列之間的間隙是組織網頁內容的有用技術。
以上是CSS中如何設定長度來設定列之間的間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
