列间隙 | column-gap
column-gap
column-gapCSS属性设置为被指定将被显示为多列的元件的元件列之间的间隙的大小。
/* 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 |
