gap

介绍

gap 属性是用来设置弹性布局和网格布局行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式（column-gap 是可选的）。

假如 column-gap 缺失的话，则会被设置成跟 row-gap 一样的的值。row-gap 和 column-gap 都可以用 <length> 或者 <percentage> 来表示。

使用示例

语法

/* One <length> value */
gap: 20px;
gap: 1em;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

取值

<length>

弹性布局或网格布局行与列之间的间隙宽度。
<percentage>

行与列之间直接的间隙宽度，相对容器自身 content area 对应轴尺寸的百分比。比如说，row-gap 使用 percentage 时，是相对于自身 content area 竖向大小的百分比。

形式定义

初始值	as each of the properties of the shorthand: `row-gap: 0` `column-gap: 0`
适用元素	弹性容器和网格容器
是否支持继承	否
是否支持动画
百分比	refer to corresponding dimension of the content area(e.g.,`row-gap` refer to column axis size)

形式语法

gap =
  <'row-gap'> <'column-gap'>?

<row-gap> = <length-percentage [0,∞]>

<column-gap> = <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

兼容性

LCD tables only load in the browser

#gap

#介绍

#使用示例

#语法

#取值

#形式定义

#形式语法

#兼容性

gap

介绍

使用示例

语法

取值

形式定义

形式语法

兼容性