column-gap

版本： CSS3

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

示例

/* Keyword value */
column-gap: normal; 

/*  values */
column-gap: 3px;
column-gap: 2.5em;

/*  value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

浏览器支持

仅仅火狐、safari浏览器支持 column-gap

语法

column-gap : normal | <length> | <percentage>

取值：

• normal ：表示列之间的间隔宽度。在多列布局时默认间隔为1em，其他类型布局默认间隔为 0。
• <length> ：定义列之间的间隔大小。而且 <length> 值必须是非负数的。
• <percentage> ：用 <percentage> （百分比）来定义列之间的间隔大小。同样的， <percentage> 值也必须是非负数的。

实例：

div
{
	column-gap:40px;
	-moz-column-gap:40px;/*firefox*/
	-webkit-column-gap:40px;/*safari and chrome*/
}

<style>
.content-box {
	width:20%;
	padding:20px;
	border: 10px solid #000000;
	column-count:3;
	column-gap:50px;
	-moz-column-gap:50px;/*firefox*/
	-webkit-column-gap:50px;/*safari and chrome*/
}
.content-box .items
{
	border:1px solid #ff6633;
	padding:10px;
}
</style>

<h3>效果：</h3>
<div class="content-box">
	<p class="items">第一列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第二列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第三列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第四列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第五列文字部分：内容内容内容内容内容内容</p>
</div>