CSS3 column-gap 属性

概述

CSS3 column-gap 属性用于设置多列布局中的列与列之间的间隔距离。它是CSS3 列布局模块中的一部分，这个模块为多列元素提供了一种优远的布局方式，让设计师可以通过设置少量简单的CSS属性就能够快速地布局多列元素。

语法

column-gap 属性的语法格式为:

 column-gap: <length> | normal;

其中：

<length>：指定列与列之间的间隔距离，以像素（px）、百分比（%）、长度（em、rem等）等作为数值单位。
normal：默认值，表示元素之间不设置间距。

取值范围

column-gap 可以接受的长度值范围视情况而变化，要根据不同页面的设计而进行相应设置。通常来说，一个合理的长度值应该在20-60像素之间。

使用注意事项

使用 column-gap 属性时，必须先将元素设置为多列布局模式，即需要设置属性 column-count 或 column-width 的值为一个大于1的数字。
当设置 column-gap 时，需要考虑到该属性对元素高度的影响。由于列与列之间存在一定的间隔，因此元素的实际宽度可能比指定的宽度要小。如果元素太狭长，那么该元素中显示的文本会被截断或者换行处理。
如果要通过设置列宽度来控制布局，建议使用 column-width 属性，而不是 column-count 属性，这样可以更加灵活地控制列宽度和列数。

实例

下面的样例中，我们使用 column-gap 属性来设置多列布局中的列与列之间的间隔距离，具体如下所述：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3 column-gap 属性</title>
  <style>
    .multi-col-container{
        column-count: 4;      /*设置4列*/
        column-gap: 40px;    /*设置列与列之间的间隔距离*/
    }
  </style>
</head>
<body>
  <div class="multi-col-container">
    <p>这是一个多列元素，使用column-gap属性设置列与列之间的间隔距离。</p>
    <p>使用 column-count 属性，我们可以非常简便地实现多列布局。</p>
    <p>同时，通过设置 column-gap 属性，我们还能控制列与列之间的间隔距离。</p>
    <p>这使得多列元素布局更加灵活，更加美观。</p>
    <p>这些文本内容将被自动分布在不同的列中，从而达到多列布局的效果。</p>
    <p>可以看到，文本内容自动在不同列中进行了分布，而整个布局看起来紧凑而有序。</p>
  </div>
</body>
</html>

结论

CSS3 column-gap 属性可以让设计师轻松地控制多列布局中的列与列之间的间距。这极大地方便了日常网页设计工作，同时也给用户带来更加优秀的阅读体验。

CSS3 column-fill 属性 CSS3 column-rule 属性