CSS参考手册
多列布局 | Multi-column Layout
列间隙 | column-gap
column-gap
CSS属性设置为被指定将被显示为多列的元件的元件列之间的间隙的大小。
/* Keyword value */
column-gap: normal;
/* <length> values */
column-gap: 3px;
column-gap: 2.5em;
/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;
Initial value |
normal |
---|---|
应用对象 |
multicol elements |
是否可继承 |
no |
百分比值 |
refer to the content width of the multi-column element |
媒体 |
visual |
计算值 |
as specified with lengths made absolute |
动画类型 |
a length, percentage or calc(); |
规范顺序 |
per grammar |
语法
关键词normal
或长度。
值
normal
是指示使用浏览器定义的列之间的默认间距的关键字。大多数现代浏览器遵循的规范建议这个长度等于1em
。<length>
是<length>
定义列之间的差距的大小的值。它不能是负面的,但可能是相等的0
。
形式语法
<length-percentage> | normalwhere
<length-percentage> = <length> | <percentage>
实例
.content-box {
border: 10px solid #000000;
column-count: 3;
column-gap: 20px;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Multi-column Layout ModuleThe definition of 'column-gap' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 50.02 |
(Yes)-webkit (Yes) |
1.5 (1.8)-moz1 52 (52)3 |
10 |
11.10 |
3.0 (522)-webkit |
Feature |
Android |
Android Webview |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support |
? |
? 50.02 |
(Yes)-webkit (Yes) |
(Yes) 52.0 (52)3 |
? |
? |
? |
? 50.02 |
多列布局 | Multi-column Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。