CSS डिस्प्ले

हर HTML element का एक display मान होता है। यह तय करता है कि element पेज पर कैसे दिखेगा: क्या वह अपने लिए पूरी लाइन लेगा, या दूसरे elements के बगल में बैठेगा? क्या वह जगह लेगा भी या नहीं? display property आपको वह व्यवहार बदलने देती है।

Diagram — देखें, यह सब कैसे जुड़ता है

दो elements जिन्हें आप पहले से जानते हैं, अंतर साफ़ दिखाते हैं। <div> block है — वह पूरी चौड़ाई तक फैलता है और अगली चीज़ को नई लाइन पर धकेल देता है। <span> inline है — वह सिर्फ अपने text जितना चौड़ा होता है और लाइन के अंदर बैठता है। एक ही पेज, एक ही CSS, पूरी तरह अलग व्यवहार।

Block — अपनी पूरी लाइन

Block element नई लाइन से शुरू होता है और अपने parent की पूरी चौड़ाई लेता है। Headings, paragraphs, lists और divs डिफ़ॉल्ट रूप से block होते हैं। आप उनकी width और height तय कर सकते हैं, और चारों तरफ margins जोड़ सकते हैं। यह पेज के बड़े हिस्सों का सामान्य व्यवहार है।

Inline — लाइन का हिस्सा

Inline element नई लाइन से शुरू नहीं होता। वह text के बहाव के अंदर बैठता है, सिर्फ अपने content जितना चौड़ा। Links और spans डिफ़ॉल्ट रूप से inline होते हैं। यहाँ वह बात है जिस पर beginners सबसे ज़्यादा अटकते हैं: width और height inline elements पर काम नहीं करते, और ऊपर-नीचे के margins नज़रअंदाज़ कर दिए जाते हैं। अगर आप <span> पर width लगाते हैं और कुछ नहीं होता, तो यही वजह है।

Inline-block — दोनों का मेल

inline-block बीच का रास्ता है। Element दूसरों के बगल में लाइन में बैठता है, जैसे inline element — लेकिन width, height और margins सब काम करते हैं, जैसे block element। Horizontal menu बनाने का यही क्लासिक तरीका है: हर link एक छोटा block है, और blocks साथ-साथ बैठते हैं।

None — पूरी तरह गायब

display: none element को पेज से पूरी तरह हटा देता है। वह सिर्फ अदृश्य नहीं होता — वह कोई जगह भी नहीं लेता, और दूसरे elements उसके चारों ओर सिमट जाते हैं। Menus, popups और extra sections इसी तरह छिपाए जाते हैं, जब तक उनकी ज़रूरत न हो।

Visibility — छिपा है, पर जगह बची है

visibility: hidden भी element को छिपाता है, पर एक बड़े अंतर के साथ: खाली जगह ठीक वहीं रहती है जहाँ element था। Layout नहीं हिलता। display: none तब इस्तेमाल करें जब आप चाहते हैं कि element चला जाए, और visibility: hidden तब जब आप चाहते हैं कि वह छिपा रहे पर पेज अपना आकार बनाए रखे।

Syntax — display के मान

.menu-link {
  display: inline-block;
  width: 120px;
  padding: 10px;
  text-align: center;
}
.hidden-box {
  display: none;
}
.kept-space {
  visibility: hidden;
}

आम गलतियाँ

• Inline <span> या <a> पर width या height लगाना और हैरान होना कि कुछ बदलता क्यों नहीं।
• display: none तब इस्तेमाल करना जब मतलब visibility: hidden था, इसलिए element के गायब होते ही पूरा layout उछल जाता है।
• यह भूल जाना कि block element हमेशा नई लाइन से शुरू होता है, भले ही बगल में जगह हो।
• किसी चीज़ को display: none से छिपाना और उम्मीद करना कि वह अब भी clickable या पढ़ने लायक रहेगी।
• पूरे बॉक्स को clickable बनाने के लिए link पर display: block लगाना, फिर उसे padding देना भूल जाना।

याद रखें

• Block पूरी लाइन लेता है और width व height मानता है; inline लाइन के अंदर बैठता है और नहीं मानता।
• Inline-block लाइन में बैठता है पर width, height और margins अब भी मानता है।
• display: none element और उसकी जगह को हटा देता है; visibility: hidden उसे छिपाता है पर जगह बचा लेता है।
• साधारण horizontal menus और button पंक्तियों के लिए inline-block इस्तेमाल करें।
• अगर width या height कुछ करती नहीं दिख रही, तो पहले element का display मान देखें।
• तरकीब: Block पूरी लाइन लेता है, inline लाइन में बैठता है, inline-block दोनों का मेल है।

उदाहरण समझिए

• .menu a { display: inline-block; } — हर menu link एक छोटा block बन जाता है जो अब भी लाइन में बैठता है, इसलिए चारों links साथ-साथ बैठते हैं।
• .menu a { width: 110px; padding: 10px; } — width और padding यहाँ सिर्फ इसलिए काम करते हैं क्योंकि links inline-block हैं; सादे inline links पर वे नज़रअंदाज़ हो जाते।
• .menu a:hover { background-color: #1d4ed8; color: white; } — mouse के नीचे वाला link नीला हो जाता है, ताकि visitor देख सके कि वह क्या click करने वाला है।
• .hidden-note { display: none; } — यह बॉक्स पेज से पूरी तरह हट गया है; नीचे वाला text ऊपर खिसककर gap भर देता है।
• .kept-space { visibility: hidden; } — यह बॉक्स अदृश्य है, पर उसकी खाली जगह ठीक वहीं है जहाँ थी, इसलिए layout नहीं हिलता।
• .notice { display: block; } — notice एक block है, इसलिए वह नई लाइन से शुरू होती है और पेज की पूरी चौड़ाई तक फैलती है।