CSS gap property क्या है - ldkailnk

-
CSS gap property kya hai: सीएसएस कोडिंग में गैप प्रॉपर्टी का उपयोग तब किया जाता है जब हम चाहते हैं कि rows के बीच और columns के बीच में थोड़ा सा गैप बने, इस प्रकार जब हम रो और कॉलम के बीच थोड़ा सा जगह छोड़ना चाहते तो गैप प्रॉपर्टी का यूज किया जाता है।

आज के इस आर्टिकल में हम www.ldkalink.com पर CSS gap property क्यों उपयोग (use) में लाया जाता है और कब इसका इस्तेमाल किया जाता है इसके बारे में विस्तार से जाने वाले हैं।

what is CSS gap property क्या है
CSS gap property kya hai

CSS gap property क्या है?

what is CSS gap property in Hindi: CSS कोडिंग में gap property का उपयोग rows और columns के बीच में gap क्रिएट करने के लिए किया जाता है। 

उदाहरण (Example)

मान लो हम चाहते है की रो और कॉलम के बीच में 40px का gap हो तो इसके लिए हम नीचे दिए गए कोड का यूज करते है आप अपने अनुसार इस px के मान को घटा या बढ़ा भी सकते है। 
.grid-container {
gap: 40px;
}

CSS gap property परिभाषा (definition) और उपयोग (Usage)

gap प्रॉपर्टी यह बताता है की css flexbox, grid या फिर multi-columns layout में rows के बीच और कॉलम के बीच कितने साइज का गैप सेट करना है shorthand प्रॉपर्टी के लिए नीचे दिए गए कोड फॉलो कर सकते है: 
  • row-gap
  • Columns-gap
Note: gap प्रापर्टी को ही पहले grid-gap प्रॉपर्टी के नाम से जाना जाता था। 

CSS Syntax

gap: row-gap columns-gap | initial | inherit;

Property values

row-gap - इसका उपयोग एक ग्रिड या फ्लेक्सबॉक्स लेआउट में rows के बीच गैप बनाने के लिए इसका यूज किया जाता है। 
Columns-gap - इसका उपयोग एक ग्रिड या फ्लेक्सबॉक्स लेआउट या multi-columns layout में कॉलम के बीच में गैप बनाने के लिए इसका यूज किया जाता है। 
initial - यह एक डिफ्यूट वैल्यू है इस प्रॉपर्टी का उपयोग करने से यह एक डिफल्ट सेट करके देता है। 
inherit - यह पैरेंट एलिमेंट है। 

More Examples 

    HTML CODE 

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

    CSS CODE

.grid-container {
  border: 2px solid black;
  background-color: yellow;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
}
.grid-container > div {
  border: 1px solid black;
  background-color: red;
}

Related pages

CSS Tutorial: CSS Padding सीएसएस में पैडिंग का उपयोग क्यों किया जाता है इसे भी पढ़े। 
CSS Tutorial: CSS Background Image सीएसएस में बैकग्राउंड इमेज कैसे लगते है यह भी जाने। CSS Tutorial: CSS Breadcrumbs क्या है यह SEO में कैसे इम्पोर्टेन्ट रोल प्ले करता है जाने।   

Popular Posts

Fake smile Quotes in Hindi - ldkalink

-
Fake smile Quotes in Hindi:  इस आर्टिकल में  fake smile status  से रिलेटेड बहुत सारे  words  और shayari है यदि आप sad fake smile quotes Hindi me  for girls and boys चाहते है तो आप सही जगह पर है।  
view answer

संतुलित बल और असंतुलित बल - ldkalink

-
संतुलित बल और असंतुलित बल (balanced and unbalanced force): इससे पहले वाले आर्टिकल में हमने बल के बारे में विस्तार से जाना था पर अभी हम Santulit bal और  asantulit bal के बारे में उदाहरण के साथ जानने वाले है। 
view answer

image file formats क्या है - ldkalink

-
Image file format  क्या है: 10 Type of image format   list में इमेज के कई प्रकार होते है और इन सब का उपयोग इनके जरूरत के आधार पर अलग समय में अलग अलग जगह पर किया जाता है कुछ इमेज फॉर्मेट जैसे की jpeg, png, raw, tiff, gif, pdf, psd, indd,   eps, Ai आदि है।    इन सभी तरह के इमेज फॉर्मेट का उपयोग कब और कैसे किया जाता है इसके बारे में www.ldkalink.com पर निचे विस्तार से बताया गया है।  image file format क्या है 10 Types of image file extensions आज हम उन सभी  image file formats in Hindi   के बारे में  Examples के साथ   बात करने वाले है जो अलग अलग तरह के  image file extensions  के लिए multimedia के रूप में computer तथा mobiles में यूज़ किये जाते है।    JPEG (JPG) - joint photographic experts group  PNG (portable network graphics) GIF (graphics interchange format) TIFF (tagged image file format) Raw - Raw image formats PDF (portable document format) PSD (Photoshop document) INDD (in Design document)  EPS (encapsula...
view answer

पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं

-
पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं ( Why is father name on PAN card ) : आज के इस आर्टिकल में हम जानने वाले हैं कि पैन कार्ड पर पिता के नाम ही क्यों लिखे जाते हैं। 
view answer

खुद को मोटीवेट करते रहने के लिए motivational stories हमेशा पढ़ते रहे

-
motivational stories in Hindi : आज हम आपके सामने छोटी सी ज्ञान वाली महान लोगों की संघर्ष से सफलता की प्रेरणादायक ( motivational ), मोरल (moral) कहानी आपके सामने लेकर आए हैं जो आपको ज्ञान देने वाली कहानी से लेकर आपकी सोच बदल देने वाली कहानी में से एक है। 
view answer

बीजांक (Bijank) किसे कहते हैं इसका उपयोग गणना की जाँच करने के लिए कैसे किया जाता है, आइये इसे कई तरह से उदाहरण से समझते है

-
बीजांक (Digital root) बीजांक (Digital root or Digital sum) : आज हम जानने वाले है की बीजांक क्या है  (Bijank kya hai)  है यह किसी भी दी गई संख्या के अंकों का एक योग होता है और इसे तब तक जोड़ा जाता है जब तक की एक अंक वाली संख्या प्राप्त न हो जाए। 
view answer

अभ्यास ही सफलता की कुंजी motivational story - ldkalink

-
अभ्यास ही सफलता की कुंजी motivational story in Hindi: आज के इस आर्टिकल में हम अभ्यास ही सफलता की कुंजी होती है को प्रेरणादायक कहानी (prernadayak kahani) को एक साधारण से कहानी के रूप में समझने वाले हैं। 
view answer

blogger template कैसे create करे from scratch - ldkalink

-
Custom blogger template कैसे बनाये: ब्लॉगर यह एक content management system (CMS) है यहाँ से हम अपने लिए एक website create कर इसकी सहायता से अपने नॉलेज को बड़ी ही आसानी से लोगो तक पहुंचा सकते है।    website या Blog बनाने के लिए एक Domain name के साथ एक Template की भी जरूरत होती है क्यों हर साइट का अपना    एक   अलग नाम और लुक होता है internet पर कभी भी एक नाम के दो साइट नहीं हो सकते है।  वैसे तो इंटेंटनेट पर कई सारे पहले से बना हुआ फ्री और पेड दोनों तरह के टेम्पलेट मौजूद होते है free वाले टेम्पलेट में कुछ लिमिटेशन होता है और पेड वर्शन में कुछ सुविधाएं और दे दी जाती है।  पर इसे हम अपने तरीके से पूरी तरह कस्टमाइज नहीं कर सकते है इसलिए हमें एक कस्टम ब्लॉगर टेम्पलेट क्रिएट करने की जरूरत होती है जिसे हम अपने तरीके से बना सकते है। लेकिन यदि आप खुद से यानि blogger में manual method से Custom template कैसे create करते है इसके बारे में जानना चाहते है तो आज से इस आर्टिकल में हम how to make a blogger template हिंदी में सिखने वाले है यानि blogger में custom templ...
view answer

अदिश राशि और सदिश राशि में अंतर - ldkalink

-
अदिश राशि (scalar quantity) और सदिश राशि (vector quantity): आज हम अदिश राशि और सदिश राशि के बारे में बात करने वाले है की आखिर adish rashi (scalar quantity) और sadish rashi (vector quantity) में anter (difference) क्या होता क्या होता है।  कौन कौन से राशि अदिश और सदिश राशि होती है और अदिश राशि तथा सदिश राशि की पहचान कैसे करे इन सब के बारे में आज हम इस आर्टिकल में बात करने वाले है।  अदिश राशि और सदिश राशि में अंतर अदिश और सदिश राशि में अंतर क्या है  Scalar and vector quantity definition in Hindi: सबसे पहले हम Adish rashi और sadish rashi को इसकी परिभाषा (Peribhasha) से समझते है ऐसी भौतिक रशिया जिनमे केवल परिणाम होता है अदिश राशि कहलाती है जैसे की   दूरी, छेत्रफल, द्रव्यमान, समय, तापमान, विधुत धरा, घनत्व, आयतन इत्यादि।  पर जिन राशियों में परिणाम और दिशा दोनों होती है इन्हे सदिश राशि कहते है जैसे की वेग, बल, संवेग, चुम्बकीय आघूर्ण, ताप प्रवणता, विद्युत द्विध्रुव आघूर्ण इत्यादि । अदिश राशि का उदहारण/Scalar quantity example  अदिश राशि की पहचान कैसे...
view answer

on page seo और off page seo क्या है - ldkalink

-
On-page seo vs. off-page seo: आज के इस आर्टिकल Types of SEO में हम जानेंगे की on-page SEO और off-page SEO  किसे कहते है आखिर ये दोनों होता क्या है इसे हम इसकी परिभाषा और example  से भी समझने का प्रयास करेंगे। इसके अलावा black hat seo और white hat seo क्या है  क्या यह भी seo के ही प्रकार है या फिर ये दोनो seo करने के techniques है अगर हम  white hat और black hat  की बात करे तो ये दोनो ही  seo करने की techniques है  यानि content को optimize करने के तरीके है।  Black hat seo और white hat seo में कौन कौन सी techniques का use किया जाता है इसके बारे में हम पिछले आर्टिकल में step by step जाना था यदि आपने यह आर्टिकल नहीं पढ़ा है तो इसे एक बार जरूर पढ़े और इसके साथ ही Technical seo क्या है इसमें कौन कौन से तरीका use किया जाता है इसके बारे में पूरा विस्तार से जानेंगे।  Types of seo - on page seo और off page seo क्या है आप सभी जानते है की हर काम को करने के दो तरीके होते ही है पहला जो गलत तरीके से किया जाता है और दूसरा सही तरीके से, जब सही तरीके से...
view answer

Translate