စီစ်အုပ်စု အခြေခံ အကျယ်

定义和用法

gap 属性定义 flexbox、网格或多列布局中行与列之间的间隙大小。它是以下属性的简写属性：

注意：gap 属性以前被称为 grid-gap。

另请参阅：

CSS 教程：CSS 网格布局

CSS 教程：CSS 弹性框布局

CSS 教程：CSS 多列布局

CSS 参考手册：row-gap 属性

CSS 参考手册：column-gap 属性

实例

例子 1

将行与列之间的间距设置为 50px：

.grid-container {
  gap: 50px;
}

亲自试一试

例子 2：网格布局

在网格布局中将行间距设置为 20px，将列间距设置为 50px：

#grid-container {
  display: grid;
  gap: 20px 50px;
}

亲自试一试

例子 3：弹性框布局

在弹性框布局中将行间距设置为 20px，将列间距设置为 70px：

#flex-container {
  display: flex;
  gap: 20px 70px;
}

亲自试一试

例子 4：多列布局

在多列布局中将列间距设置为 50px：

#newspaper {
  columns: 3;
  gap: 50px;
}

亲自试一试

CSS 语法

gap: row-gap column-gap|initial|inherit;
值 描述
row-gap 设置网格或弹性框布局中行之间的间隙大小。
column-gap 设置网格、弹性框或多列布局中列之间的间隙大小。
initial အချက်အလက်ကို မူးယစ်ဆိုင်ရာ အချက်အလက်အား အစီအစဉ်ပြုသည်။ ကြည့်ရှုရန် initial。
inherit အဖွဲ့အစိုးရအား အခြေခံ အချက်အလက်ကို အမိုးအကြောင်းပြုသည်။ ကြည့်ရှုရန် inherit。

နည်းပါးဆိုင်ရာ

မူးယစ်ဆိုင်ရာ normal normal
အမိုးအကြောင်း မမြင်တွေ့
လှည့်ပတ်ဆိုင်ရာ အစီအစဉ် မြင်တွေ့ရသည်။ အသုံးပြုသော အချက်အလက်ကို ကြည့်ရှုရန်လှည့်ပတ်ဆိုင်ရာ အချက်အလက်。
ပုံစံ: CSS Box Alignment Module Level 3
ဂျူနီယို ဘာသာပြန် object.style.gap="50px 100px"

ဘာသာပြန်ဆိုင်ရာ

အချက်အလက်များကို အက်စ်စ်စ် အသုံးပြုသော ဘာသာပြန်သည် အထူးအရောက်တွဲဝင် အသုံးပြုသော ဘာသာပြန်ကို မြင်တွေ့ရသည်။

ပြင်ဆင် Chrome IE / Edge Firefox Safari Opera
စီပြတွဲဝင် 66 16 61 12 53
အကျွံတွဲဝင် 84 84 63 14.1 70
အထူးအရောက်တွဲဝင် 66 16 61 မမြင်တွေ့ရ 53