CSS column-gap 属性-之路教程

CSS column-gap 属性值说明

值	说明
normal	列之间的指定长度正常。建议采用1em值。这是默认值。
length	指定设置列之间间距的长度。可以用em、px和百分比指定。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

语法

column-gap: length | normal | initial | inherit;

column-gap 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
        -webkit-column-gap: normal; /* Chrome, Safari, Opera */
        -moz-column-gap: normal; /* Firefox */
        column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>The column-gap 属性示例</h2>
    <div>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
    </div>
  </body>
</html>

具有“长度”值的 column-gap 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
        -webkit-column-gap: 30px;  /* Chrome, Safari, Opera */
        -moz-column-gap: 30px; /* Firefox */
        column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Column-gap 属性示例</h2>
    <div>
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
    </div>
  </body>
</html>

CSS column-gap 属性

column-gap 属性设置列之间的间隙长度。

column-gap 属性是 CSS3 属性之一。

它由两个值指定：normal 和长度。
“normal”是默认值。
列之间的间隙是正常的。
“Gap间隙”可以用 em、px 和百分比指定。

添加了一些属性扩展，例如 -webkit- 适用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 适用于 Firefox，-o- 适用于旧版本的 Opera 等。

当在列之间使用列规则时，它将位于间隙的中间。

初始值	normal
应用于	多列元素，柔性容器，网格容器。
继承	无效
可动画的	列间距的长度可以设置动画。
版本	CSS3
DOM 语法	object.style.columnGap=“100px”；

日期：2020-06-02 22:14:22 来源：oir作者：oir

←CSS column-fill 属性

CSS column-rule-color 属性→

CSS column-gap 属性值说明

语法

column-gap 属性示例：

具有“长度”值的 column-gap 属性示例：

目录