#gap

#介绍

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

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

#使用示例

css-apisrc/gap/App.tsx

预览

#语法

/* 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 竖向大小的百分比。

#形式定义

#形式语法

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