CSS3 列間距column-gap
column-gap主要用來設(shè)置列與列之間的間距，其語法規(guī)則如下：
column-gap: normal || <length>
取值說明
|
屬性值
|
屬性值說明
|
|
normal
|
默認(rèn)值，默值為1em（如果你的字號是px，其默認(rèn)值為你的font-size值）。
|
|
<length>
|
此值用來設(shè)置列與列之間的距離，其可以使用px,em單位的任何整數(shù)值，但不能是負(fù)值。
|
例如：將內(nèi)容分三列顯列，列與列之間的間距為2em，實(shí)現(xiàn)代碼為：
column-count: 3;
column-gap: 2em;
任務(wù)
在CSS編輯器第13-17行輸入正確代碼，將內(nèi)容列與列之間的間距設(shè)置為3em。（注意：考慮瀏覽器的兼容性）效果如下圖所示：
溫馨提示：案例的效果如上圖所示才算順利通關(guān)，否則請?jiān)賹W(xué)習(xí)一遍本節(jié)的知識點(diǎn)！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列間距column-gap</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns">
<h2>我要分列顯示</h2>
<p>為了能在Web頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-？;
-moz-？;
-o-？;
-ms-？;
？;
}
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
