10-4 CSS3 列间距column-gap
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3 列间距column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

取值说明

属性值

属性值说明

normal

默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。

<length>

此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：

column-count: 3;
column-gap: 2em;

任务

在CSS编辑器第13-17行输入正确代码，将内容列与列之间的间距设置为3em。（注意：考虑浏览器的兼容性）效果如下图所示：

温馨提示：案例的效果如上图所示才算顺利通关，否则请再学习一遍本节的知识点！

index.htmlstyle.css 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>列间距column-gap</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div class="columns">
  10.   <h2>我要分列显示</h2>
  11.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  12.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  13.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  14. </div>
  15. </body>
  16. </html>
  1. .columns {
  2.   padding: 5px;
  3.   border: 1px solid green;
  4.   width: 900px;
  5.   margin: 20px auto;
  6.  
  7.   -webkit-column-count:3;
  8.   -moz-column-count:3;
  9.   -o-column-count:3;
  10.   -ms-column-count:3;
  11.   column-count:3;
  12.  
  13.   -webkit-？;
  14.   -moz-？;
  15.   -o-？;
  16.   -ms-？;
  17.   ？;
  18. }
下一节