CSS Display
display एक शांत सवाल का जवाब देता है: यह बॉक्स पेज से कैसे जुड़ता है? कुछ पूरे-चौड़ाई ब्लॉक की तरह ढेर होते हैं; कुछ वाक्य के अंदर बैठते हैं; कुछ को लेआउट से पूरी तरह हटाया जा सकता है। यह पाठ रोज़ के मान मैप करता है — और गहरा inline-block अभ्यास अगले सत्र के लिए छोड़ता है।
display टूलकिट
📊 एक नज़र में display
| मान | रोज़ का काम |
|---|---|
block |
अपनी पंक्ति पर शुरू; अक्सर पंक्ति की चौड़ाई भरता है |
inline |
टेक्स्ट पंक्ति में रहता है; width/height अक्सर अनदेखा |
inline-block |
टेक्स्ट की तरह पंक्ति में बैठता है, पर width/height/padding बॉक्स की तरह लेता है |
none |
तत्व को लेआउट से हटाता है (जगह सिमटती है) |
flex / grid |
शक्तिशाली लेआउट मोड — बाद के पाठ, यहाँ नहीं |
डिफ़ॉल्ट HTML कई टैग के लिए पहले से display चुनता है (div ब्लॉक है, span इनलाइन, button अक्सर लगभग inline-block)। जब प्रवाह को दूसरा काम चाहिए, CSS उसे बदलने देता है।
Block — अपनी पंक्ति, बड़ा बॉक्स
Block बॉक्स नई पंक्ति पर शुरू होते हैं और आमतौर पर उपलब्ध चौड़ाई लेते हैं। शीर्षक, पैराग्राफ और div डिफ़ॉल्ट रूप से ऐसे ही व्यवहार करते हैं।
Block ज़बरदस्ती
css.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}Inline — वाक्य के अंदर
Inline बॉक्स टेक्स्ट प्रवाह में बैठते हैं और शब्दों के साथ लपेटते हैं। शुद्ध inline पर width या height लगाना अक्सर बेकार है — इसलिए लोग block या inline-block चुनते हैं।
Inline ज़बरदस्ती
css.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}Inline-block — छोटी झलक
inline-block जगह हो तो पड़ोसियों को एक पंक्ति में रखता है, फिर भी width, height और padding मानता है। अगले पाठ में सावधानी से अभ्यास करेंगे; यहाँ सिर्फ हाइब्रिड पहचानें।
Inline-block झलक
css.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}None — लेआउट छोड़ो
display: none तत्व छिपाता है और उसकी जगह सिमटाता है। लेआउट और कई सहायक इसे गायब मानते हैं। बिखरे नियमों की बजाय क्लास टॉगल पसंद करें।
none से छिपाएँ
css.is-hidden {
display: none;
}visibility: hidden अलग कहानी है — बॉक्स अभी भी जगह आरक्षित कर सकता है। यह पाठ लेआउट से असली हटाने के लिए display: none पर रहता है। यहाँ visibility नहीं खोदेंगे।
शांत display आदत
display प्रवाह कारणों से बदलें — बटन कॉस्मेटिक (पिछला पाठ) के लिए नहीं, और हर लेआउट समस्या का शॉर्टकट नहीं (flex/grid बाद में)। जानबूझकर अवस्थाओं को क्लास से नाम दें।
दिखाएँ/छिपाएँ क्लास
css.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}
.panel.is-hidden {
display: none;
}तीन मोड तुलना
css.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }खुद आज़माएँ
- एक
spanकोdisplay: blockकरें और width + padding दें। - छोटे
div(या शीर्षक) कोdisplay: inlineकरें और वाक्य में देखें। inline-blockवाला.chipजोड़ें — देखें width/padding काम करते हैं।.is-hidden { display: none; }से पैनल छिपाएँ और क्लास टॉगल करें।- एक वाक्य लिखें: लेबल के लिए कब block, कब inline?
आम गलतियाँ
- शुद्ध
inlineपरwidth/heightकाम करने की उम्मीद - सिर्फ दिखावट मंद करनी हो तो
display: noneलगाना — और जगह सिमटना भूलना - इस पाठ को बटन hover त्वचा समझना (वह Buttons था)
- यहाँ Flexbox/Grid रेसिपी डालना बजाय चार मूल मान सीखने के
- «लेआउट से छिपा» को अगले गहरे
inline-blockपाठ से मिलाना
सारांश
displayनियंत्रित करता है बॉक्स पेज प्रवाह से कैसे जुड़ता हैblockअपनी पंक्ति लेता है;inlineटेक्स्ट में रहता हैinline-blockहाइब्रिड है — अभ्यास आगेnoneतत्व और जगह लेआउट से हटाता है- display प्रवाह कामों के लिए बदलें; Fancy लेआउट बाद के पाठों के लिए छोड़ें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी