CSS గాప్ అట్రిబ్యూట్

定义和用法

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 బాక్స్ అలిగ్న్మెంట్ మొడ్యూల్ లెవల్ 3
JavaScript సంకేతపత్రం: object.style.gap="50px 100px"

బ్రౌజర్ మద్దతు

పట్టికలో నమూనాలు ఈ అనుకూలతను మొదటి బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి。

లేఆఉట్ క్రోమ్ ఐఈ / ఎంజె ఫైర్ఫాక్స్ సఫారీ ఓపెరా
గ్రిడ్ లో 66 16 61 12 53
ఫ్లెక్స్ బాక్స్ లో 84 84 63 14.1 70
బహుళ నిలువుల్లో 66 16 61 మద్దతు లేదు 53