CSS column-gap 属性

CSS column-gap 属性用来设置元素列之间的间隔 (gutter) 大小。


实例

规定列间的间隔为 40 像素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .newspaper
  6. {
  7. -moz-column-count:3; /* Firefox */
  8. -webkit-column-count:3; /* Safari and Chrome */
  9. column-count:3;
  10. -moz-column-gap:30px; /* Firefox */
  11. -webkit-column-gap:30px; /* Safari and Chrome */
  12. column-gap:30px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p><b>注释:</b>Internet Explorer 不支持 column-count 属性。</p>
  18. <div class="newspaper">
  19. </div>
  20. </body>
  21. </html>

页面底部有更多实例。


浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
column-gap50.04.0 -webkit-10.052.02.0 -moz-9.03.1 -webkit-37.015.0 -webkit11.1

定义和用法

column-gap 属性规定列之间的间隔。

注释:如果列之间设置了 column-rule,它会在间隔中间显示。

column-gap,一开始是 Multi-column 布局 下的特有属性,后来在其他布局中也使用这个属性。如 Box Alignment 中的表述,该属性已经在Multi-column(多列布局)、Flexible Box(弹性盒子)以及 Grid layouts(网格布局)中使用。

默认值:normal
继承性:no
版本:CSS3
JavaScript 语法:object.style.columnGap="40px"

语法

  1. column-gap: length|normal;
描述测试
length把列间的间隔设置为指定的长度。测试
normal规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。测试

相关页面

CSS3 教程:CSS3 多列

分类导航