Hisia CSS gap

Ufafanuzi na matumizi

Tabia ya gap inaeleza kina na kati ya siku na mabara katika mashirika ya kifupi cha kifupi, grid au mawili ya mabara. Ni msingi wa tabia zifuatazo:

Tahadhari:Tabia ya gap ilikuwa inaitwa: grid-gap.

Tazama pia:

Mafundisho ya CSS:Mashirika ya grid ya CSS

Mafundisho ya CSS:Mashirika ya kifupi cha kifupi ya CSS

Mafundisho ya CSS:Mashirika ya mawili ya mabara ya CSS

Mafundisho ya CSS:Tabia ya row-gap

Mafundisho ya CSS:Tabia ya column-gap

Mifano

Mifano 1

Inafafanua kina na kati ya siku na mabara kwa 50px:

.grid-container {
  gap: 50px;
}

Tafadhali tafuta mifano michezo

Mifano 2: Mashirika ya grid

Inafafanua kina na kati ya siku katika mashirika ya grid kwa 20px, na kina na kati ya mabara kwa 50px:

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

Tafadhali tafuta mifano michezo

Mifano 3: Mashirika ya kifupi cha kifupi

Inafafanua kina na kati ya siku katika mashirika ya kifupi cha kifupi kwa 20px, na kina na kati ya mabara kwa 70px:

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

Tafadhali tafuta mifano michezo

Mifano 4: Mashirika ya mawili ya mabara

Inafafanua kina na kati ya mabara katika mashirika ya mawili ya mabara kwa 50px:

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

Tafadhali tafuta mifano michezo

Inayotumika Kiingereza:

gap: row-gap column-gap|initial|inherit;
Wadhihio Maelezo
row-gap Kufafanua ukubwa wa kina na kati ya siku na mabara katika mashirika ya grid au kifupi cha kifupi.
column-gap Kufafanua ukubwa wa kina na kati ya siku na mabara katika mashirika ya grid, kifupi cha kifupi au mawili ya mabara.
initial Weka tabia hii kwa mwako wa kina. Tazama: initial.
inherit Kumwagilia tabia hii kutoka kwa elementi yake wa kina. Tazama: inherit.

Mafundisho ya teknolojia

Mwako: normal normal
Kumwagilia: Haiwahusiana
Haribifu: Inahusiana. Tazama mashirika ya kina yanaonekana:Mashirika ya kina ya uharibifu.
Version: CSS Box Alignment Module Level 3
Inayotumika Kiingereza: object.style.gap="50px 100px"

taakika ya kibao

taarifa za mabara katika tabia huzingatwa kwa kina kwa kifungu cha kwanza cha programu ya kibao ambayo inahusiana na tabia hizi.

mashirika Chrome IE / Edge Firefox Safari Opera
katika grid 66 16 61 12 53
katika kifupi cha kifupi 84 84 63 14.1 70
katika mawili ya mabara 66 16 61 hakubali 53