CSS Inline-block
पिछला पाठ रोज़ के display मान मैप करता था। यहाँ हाइब्रिड का अभ्यास है: inline-block। जगह हो तो पड़ोसी एक पंक्ति में रहें — जैसे टेक्स्ट — और फिर भी असली बॉक्स चाहिए जो width, height और padding माने। यही काम है।
साथ-साथ तुलना
📊 Inline बनाम inline-block बनाम block
| मोड | पंक्ति व्यवहार | Width / height / padding |
|---|---|---|
inline |
टेक्स्ट पंक्ति में बैठता है | Width/height अक्सर अनदेखा; padding अजीब लग सकता है |
inline-block |
जगह बचे तो पंक्ति में रहता है | Width, height और padding बॉक्स की तरह काम करते हैं |
block |
अपनी पंक्ति से शुरू | पूरा बॉक्स मॉडल; अक्सर पंक्ति चौड़ाई भरता है |
जब तत्व भाई-बहनों के साथ पंक्ति बाँटे और मापने योग्य आकार भी चाहिए — चिप्स, टैग, आइकन लेबल, कॉम्पैक्ट टूलबार बटन — तब inline-block चुनें। पूरे पेज के कॉलम और जटिल अलाइनमेंट Flexbox व Grid के लिए बाद में छोड़ें।
आकार वाला चिप जो पंक्ति बाँटे
शुद्ध inline से अलग, चिप padding और तय चौड़ाई रख सकता है और दूसरे चिप्स के बगल में बैठ सकता है।
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}
सरल टूलबार पंक्ति
बराबर चौड़ाई वाले कई नियंत्रण एक पंक्ति में बैठ सकते हैं। उन्हें margin से अलग करें। Flexbox आने तक शांत टूलबार के लिए काफी है।
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}
पंक्ति में ऊर्ध्वाधर अलाइन
इनलाइन-लेवल बॉक्स टेक्स्ट या इमेज के बगल में अलग ऊँचाई पर बैठ सकते हैं। vertical-align उन्हें सरकाता है — आइकन+लेबल जोड़े के लिए middle शांत विकल्प है।
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}
.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}
व्हाइटस्पेस गैप जाल
ब्राउज़र टैग के बीच स्पेस और नई पंक्ति को टेक्स्ट नोड मानते हैं। दो inline-block भाई-बहनों के बीच वह छोटा स्पेस दिखने वाला गैप बन जाता है। यह Flexbox gap नहीं — HTML व्हाइटस्पेस का बचा हुआ हिस्सा है।
/* HTML जैसे:
<span class="tile">A</span>
<span class="tile">B</span>
नई पंक्ति से गैप छोड़ता है। */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}
गैप शांत करने के तरीके: टैग एक पंक्ति पर बिना स्पेस, नई पंक्ति कमेंट करें, या सावधानी से छोटा नेगेटिव margin। बाद में Flexbox साफ स्पेसिंग देता है — हर पंक्ति हमेशा inline-block से न थोपें।
शांत inline-block आदत
पंक्ति आइटम्स के लिए साझा क्लास रखें। जान-बूझकर आकार दें। गैप तभी ठीक करें जब परेशान करे। नेस्टेड inline-block से पूरा पेज लेआउट न बनाएँ — float युग का दर्द लौट आता है। Position और float के अपने पाठ हैं।
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
खुद आज़माएँ
- तीन
.chipबनाएँ —inline-block, तय चौड़ाई, padding — पंक्ति बाँटते देखें। - चार-बटन
.toolटूलबार बराबर चौड़ाई औरmargin-rightसे बनाएँ। - छोटा
.icon.labelके बगल रखें औरvertical-align: middleआज़माएँ। - दो
.tileभाई अलग HTML पंक्तियों पर, फिर एक पर — गैप तुलना करें। - एक वाक्य लिखें: कब inline-block काफी है, कब Flexbox का इंतज़ार?
आम गलतियाँ
- शुद्ध
inlineसेwidth/heightअसली बॉक्स जैसा मानने की उम्मीद - «रहस्यमय गैप» का दोष CSS पर जबकि असल में टैगों के बीच HTML व्हाइटस्पेस है
- पूरे मल्टी-कॉलम पेज लेआउट के लिए inline-block का इस्तेमाल
- इस पाठ को पिछले व्यापक
displayसर्वे (block / none) जैसा समझना - हाइब्रिड सीखने से पहले यहाँ
positionयाfloatरेसिपी पर कूदना
सार
inline-blockटेक्स्ट की तरह पंक्ति में बैठता है पर आकार और padding के लिए असली बॉक्स मॉडल रखता है- चिप्स, कॉम्पैक्ट टूलबार और आइकन+लेबल जोड़ों के लिए बढ़िया
vertical-alignअलग ऊँचाई वाले पड़ोसियों को मिलाता है- टैगों के बीच व्हाइटस्पेस दिखने वाला गैप बना सकता है — कारण जानें
- जटिल पंक्तियों और साफ गैप के लिए Flexbox बाद में; inline-block जान-बूझकर रखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी