CSS टॉपिक्स

🎨 CSS Design✨पाठ 9 / 16

Display और Visibility

Block, Inline, Inline-Block का व्यवहार। समझें display: none और visibility: hidden में क्या अंतर होता है।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.मुख्य डिस्प्ले मोड्स: `block`, `inline`, `inline-block`, `none`, `contents`, और `flow-root`।

2.तत्वों को छिपाने के 4 तरीके: `display: none` बनाम `visibility: hidden` बनाम `opacity: 0` बनाम `clip-path`।

3.इनलाइन एलिमेंट्स की बारीकियाँ: वर्टिकल मार्जिन क्यों नहीं चलता और वर्टिकल पैडिंग लाइनों पर क्यों चढ़ जाती है।

4.4px का रहस्यमयी गैप: `inline-block` की पुरानी समस्या और आधुनिक समाधान।

5.मॉडर्न टू-वैल्यू सिंटैक्स: बाहरी बनाम अंदरूनी डिस्प्ले प्रकार (`display: inline flex`, `display: block grid`)।

6.लेआउट आर्किटेक्चर: `display: contents` और `display: flow-root` का सही उपयोग।

📊 मुख्य डिस्प्ले मोड्स की मास्टर तुलना सारणी

`display` प्रॉपर्टी CSS का सबसे बड़ा मास्टर स्विच है। यह तय करती है कि कोई एलिमेंट ईंटों की ठोस दीवार की तरह बर्ताव करेगा या किताब के पन्ने पर लिखे शब्दों की तरह:

Display मोड	नई लाइन से शुरू?	डिफ़ॉल्ट चौड़ाई	width/height मानता है?	वर्टिकल पैडिंग/मार्जिन	आम HTML टैग्स
display: block;	हाँ (पूरी नई लाइन लेता है)	पैरेंट की 100% चौड़ाई	हाँ	पूरी तरह लागू	<div>, <p>, <h1-h6>, <section>
display: inline;	नहीं (टेक्स्ट के बीच बहता है)	कंटेंट के बराबर सिकुड़ता है	अनदेखा (Ignored)!	पैडिंग ऊपर चढ़ती है; मार्जिन बेअसर	<span>, <a>, <strong>, <em>
display: inline-block;	नहीं (अगल-बगल बैठता है)	कंटेंट के अनुसार	हाँ	पूरी तरह लागू	<button>, <input>, <img>
display: contents;	बच्चों पर निर्भर करता है	कंटेनर का कोई बॉक्स नहीं होता	कंटेनर पर बेअसर	कंटेनर पर बेअसर	रैपर डिव्स (Grid/Flex में)
display: none;	लागू नहीं (हटा दिया गया)	0px (कोई बॉक्स नहीं)	लागू नहीं	लागू नहीं	छुपे हुए मोडल, बंद ड्रॉपडाउन

👻 एलिमेंट्स को छिपाने के 4 तरीके (महत्वपूर्ण इंटरव्यू प्रश्न)

शुरुआती डेवलपर्स अक्सर `display: none` और `visibility: hidden` में उलझ जाते हैं। आप किसी एलिमेंट को कैसे छिपाते हैं, इसका स्क्रीन रीडर्स, कीबोर्ड यूज़र्स और ब्राउज़र की स्पीड पर बहुत गहरा असर पड़ता है:

display: none;रीफ्लो

स्क्रीन पर शून्य जगह घेरता है (बॉक्स खत्म)।
स्क्रीन रीडर की दुनिया से पूरी तरह बाहर।
क्लिक या कीबोर्ड फोकस नहीं ले सकता।
CSS ट्रांजिशन से एनिमेट नहीं हो सकता।

visibility: hidden;रीपेंट

पेज पर अपनी मूल खाली जगह घेरे रखता है।
स्क्रीन रीडर्स इसे नहीं पढ़ते।
क्लिक या कीबोर्ड फोकस नहीं ले सकता।
ट्रांजिशन डिले के साथ एनिमेट हो सकता है।

opacity: 0;GPU

पेज पर पूरी जगह घेरता है।
⚠️ अदृश्य होने के बाद भी क्लिक व फोकस होता है!
स्क्रीन रीडर इसे बोलकर सुनाते हैं।
GPU पर 120fps स्मूथ एनीमेशन देता है।

.sr-only (Visually Hidden)A11y

`clip-path` से 1px × 1px में समेट दिया जाता है।
पेज पर कोई दृश्य जगह नहीं लेता।
✅ स्क्रीन रीडर्स इसे जोर से पढ़कर सुनाते हैं!
आइकन बटन्स के लिए इंडस्ट्री स्टैंडर्ड।

💻 लाइव CSS Display प्लेग्राउंड

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Display Demo</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 24px;
      color: #1e293b;
    }

.container {
      max-width: 520px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

h3 {
      font-size: 15px;
      margin: 16px 0 8px 0;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

/* 1. Block Elements */
    .block-box {
      display: block;
      background: #e0e7ff;
      border: 2px solid #6366f1;
      color: #312e81;
      padding: 10px 14px;
      margin-bottom: 8px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
    }

/* 2. Inline Elements */
    .inline-tag {
      display: inline;
      background: #fef3c7;
      border: 1px solid #f59e0b;
      color: #92400e;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 13px;
    }

/* 3. Inline-Block Elements */
    .inline-block-card {
      display: inline-block;
      width: 140px;
      height: 90px;
      background: #dcfce7;
      border: 2px solid #22c55e;
      color: #14532d;
      padding: 12px;
      margin: 6px 8px 6px 0;
      border-radius: 10px;
      text-align: center;
      font-weight: 600;
      font-size: 12px;
      vertical-align: top;
    }

/* 4. Hidden element */
    .ghost-box {
      display: none;
      background: #fee2e2;
      color: #991b1b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>1. Block: Takes 100% width, starts on new line</h3>
    <div class="block-box">I am Block Box 1 (Full width shelf)</div>
    <div class="block-box">I am Block Box 2 (Pushed to a new line)</div>

<h3>2. Inline: Flows inside paragraph text</h3>
    <p style="font-size: 14px; line-height: 1.8;">
      Here is normal text with an 
      <span class="inline-tag">&lt;inline&gt; tag</span> 
      and another 
      <span class="inline-tag">Inline Badge</span> 
      living in the exact same line!
    </p>

<h3>3. Inline-Block: Side-by-side with custom width/height</h3>
    <div>
      <div class="inline-block-card">Badge A<br>140px &times; 90px</div>
      <div class="inline-block-card">Badge B<br>140px &times; 90px</div>
      <div class="inline-block-card">Badge C<br>140px &times; 90px</div>
    </div>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

🔍 `inline-block` का 4px वाला रहस्यमयी गैप और उसका इतिहास

फ्लेक्सबॉक्स आने से पहले डेवलपर्स कार्ड्स और मेनू टैब्स को अगल-बगल बैठाने के लिए `display: inline-block;` लगाते थे। लेकिन हर दो तत्वों के बीच बिना किसी मार्जिन के लगभग 4px का अनचाहा गैप आ जाता था, जिससे 33.33% वाले तीन डिब्बे टूटकर दूसरी लाइन में गिर जाते थे!

यह क्यों होता है: HTML व्हाइटस्पेस

HTML में दो शब्दों के बीच की खाली जगह या नई लाइन को एक स्पेस माना जाता है। चूंकि `inline-block` भी टेक्स्ट की तरह व्यवहार करता है, आपके एडिटर में `</div>` और `<div>` के बीच दबाया गया Enter (नई लाइन) ब्राउज़र द्वारा 4px का स्पेस बन जाता है:

<div class="card">कार्ड 1</div>
<div class="card">कार्ड 2</div>
<!-- ऊपर दी गई नई लाइन = 4px अक्षरीय स्पेस! -->

आधुनिक व पुराने समाधान

1. आधुनिक समाधान (Flexbox): `inline-block` की जगह पैरेंट पर display: flex; gap: 16px; लगाएं। फ्लेक्सबॉक्स HTML स्पेस को पूरी तरह अनदेखा करता है और सटीक पिक्सल नियंत्रण देता है।

2. पुराना तरीका: पैरेंट पर font-size: 0; लगाना, और फिर अंदरूनी बच्चों पर font-size: 14px; दोबारा सेट करना।

🧬 मॉडर्न CSS: बाहरी बनाम अंदरूनी डिस्प्ले सिंटैक्स

CSS डिस्प्ले मॉड्यूल लेवल 3 के अनुसार, `display` वास्तव में एक साथ दो व्यवहार तय करता है:

1. बाहरी डिस्प्ले टाइप (Outer)

तय करता है कि एलिमेंट अपने पैरेंट और अगल-बगल के भाई-बहनों के साथ कैसे बैठेगा:

block: नई लाइन लेगा, पूरी चौड़ाई घेरेगा।
inline: टेक्स्ट लाइन के अंदर ही बैठेगा।

2. अंदरूनी डिस्प्ले टाइप (Inner)

तय करता है कि एलिमेंट अपने खुद के अंदरूनी बच्चों को कैसे सजाएगा:

flow: साधारण ब्लॉक/इनलाइन फ्लो।
flex: बच्चों को 1D फ्लेक्स लाइन में बैठाना।
grid: बच्चों को 2D ग्रिड खानों में सजाना।

टू-वैल्यू सिंटैक्स चीट शीट:

display: inline flex; = बाहर से इनलाइन + अंदर से फ्लेक्स (`inline-flex` के समान)

display: block flex; = बाहर से ब्लॉक + अंदर से फ्लेक्स (सामान्य `flex` के समान)

display: inline grid; = बाहर से इनलाइन + अंदर से ग्रिड (`inline-grid` के समान)

display: block flow-root; = ब्लॉक कंटेनर जो सुरक्षित BFC स्थापित करता है

कोड का पंक्ति-दर-पंक्ति विश्लेषण

.block-box { display: block; width: 100%; }

एलिमेंट को अपनी पूरी समर्पित लाइन लेने पर मजबूर करता है। आने वाले ब्लॉक एलिमेंट्स एक के नीचे एक कतार में सजते हैं।

.inline-tag { display: inline; padding: 4px 8px; }

वाक्य के बीच शब्दों की तरह बहता है। दाएँ-बाएँ की पैडिंग शब्दों को दूर करती है, जबकि ऊपर-नीचे की पैडिंग ऊपर वाली लाइन पर रंग चढ़ा देती है।

.inline-block-card { display: inline-block; width: 140px; height: 90px; }

दोनों का हाइब्रिड संगम: इनलाइन की तरह अगल-बगल बैठता है, लेकिन ब्लॉक की तरह तय की गई `width`, `height`, और वर्टिकल मार्जिन का पूरा सम्मान करता है।

vertical-align: top;

`inline-block` ग्रिड्स के लिए संजीवनी! यह तत्वों को टाइपोग्राफी की बेसलाइन से चिपकने से रोकता है ताकि अलग-अलग ऊंचाई वाले कार्ड्स ऊपर से एक सीध में रहें।

🧠 अपनी समझ की जाँच करें: CSS Display

Q1साधारण `<span>` टैग पर `width: 250px; height: 100px;` लगाने पर ब्राउज़र में कोई दृश्य प्रभाव क्यों नहीं पड़ता?

Q2`display: none;` और `visibility: hidden;` के बीच लेआउट और परफॉर्मेंस का सबसे अहम अंतर क्या है?

Q3HTML में दो पास-पास रखे `display: inline-block;` एलिमेंट्स के बीच ~4px की रहस्यमयी खाली जगह (गैप) क्यों आ जाती है?

Q4आधुनिक CSS में `display: contents;` प्रॉपर्टी किसी एलिमेंट पर क्या प्रभाव डालती है?

🛠️

प्रैक्टिस चैलेंज: छुपे हुए घोस्ट बॉक्स को प्रकट करें

दाएँ हाथ के लाइव कोड एडिटर में:

स्टेप 1: <style> के अंदर .ghost-box को देखें। यह अभी display: none; से छुपा हुआ है।
स्टेप 2: HTML बॉडी में Block Box 2 के ठीक नीचे नया एलिमेंट जोड़ें: <div class="ghost-box">👻 मैं गायब था!</div>।
स्टेप 3: CSS में .ghost-box { display: none; } को बदलकर display: block; border-radius: 8px; font-weight: bold; करें। देखें कि कैसे बाकी पेज नीचे खिसक कर नए एलिमेंट को जगह देता है!
स्टेप 4: अब इसे थोड़ी देर के लिए visibility: hidden; करके देखें — ध्यान दें कि कैसे लाल डिब्बा तो गायब हो जाता है लेकिन उसकी खाली जगह वहीं बनी रहती है!

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.ghost-box { display: block; background: #fee2e2; color: #991b1b; padding: 12px 16px; border-radius: 8px; font-weight: 700; border: 2px solid #ef4444; margin-top: 8px; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: सिर्फ opacity: 0 से मोडल छिपाना

जब डेवलपर्स किसी ड्रॉपडाउन या मोडल को केवल opacity: 0 लगाकर छिपाते हैं, तो वह आँख से तो ओझल हो जाता है लेकिन स्क्रीन पर मौजूद रहता है! यूज़र जब नीचे लिखे टेक्स्ट पर क्लिक करने की कोशिश करता है, तो अनजाने में वह अदृश्य मोडल के लिंक पर क्लिक कर देता है। हमेशा opacity: 0 के साथ pointer-events: none; visibility: hidden; जरूर लगाएं।

✅ प्रो टिप: BFC के लिए `display: flow-root` अपनाएँ

पुराने `.clearfix` हैक्स भूल जाइए! यदि आपके पास फ्लोटेड (floated) एलिमेंट्स हैं या आप पैरेंट-चाइल्ड मार्जिन कोलैप्स को रोकना चाहते हैं, तो बस पैरेंट पर display: flow-root; लगा दें। यह बिना किसी साइड इफेक्ट के एकदम साफ ब्लॉक फॉर्मेटिंग कॉन्टेक्स्ट (BFC) बना देता है।

💬 Interview Q: `display: contents` क्या है और CSS Grid व Flexbox में इसका क्या जादुई उपयोग है?

React या Vue जैसे फ्रेमवर्क में अक्सर स्टेट या प्रॉप्स के लिए हमें घटकों को <div class="card-wrapper"> जैसे टैग्स में लपेटना पड़ता है। यह रैपर डिव अनचाहे ही ग्रिड का आइटम बन जाता है और पूरे ग्रिड लेआउट को बिगाड़ देता है।

रैपर पर display: contents; लगाने से ब्राउज़र मान लेता है कि वह रैपर डिव लेआउट में मौजूद ही नहीं है! उसकी अपनी कोई चौड़ाई, पैडिंग या मार्जिन नहीं रहती, और उसके अंदरूनी बच्चे सीधे बाहर आकर मुख्य ग्रिड या फ्लेक्स कंटेनर के बच्चे बन जाते हैं।

💬 Interview Q: ब्राउज़र `display: none` और `visibility: hidden` को रेंडर करते समय कैसे ऑप्टिमाइज़ करता है?

`display: none` पूरा Reflow (Layout recalculation) चलाता है: ब्राउज़र रेंडर ट्री से नोड को हटाता है और पेज के बाकी सभी तत्वों के नए एक्स/वाई निर्देशांक (coordinates) दोबारा नापता है, जो भारी काम है।

`visibility: hidden` केवल Repaint चलाता है: चूंकि खाली स्लॉट वैसा का वैसा बना रहता है, किसी भी तत्व की स्थिति नहीं बदलती। ब्राउज़र सिर्फ उस हिस्से के पिक्सल दोबारा रंगता है, जो परफ़ॉर्मेंस के लिहाज से बहुत हल्का होता है।

💬 Interview Q: इनलाइन <span> पर वर्टिकल पैडिंग क्यों दिखती है लेकिन वर्टिकल मार्जिन क्यों नहीं?

इनलाइन फॉर्मेटिंग कॉन्टेक्स्ट में लाइन की ऊंचाई (line box height) केवल फॉन्ट साइज और लाइन-हाइट से तय होती है।

जब आप इनलाइन <span> पर padding-top: 20px लगाते हैं, तो पैडिंग का बैकग्राउंड रंग स्क्रीन पर पेंट तो हो जाता है, लेकिन वह लाइन बॉक्स की ऊंचाई को नहीं बढ़ाता — इसलिए वह ऊपर वाली लाइन के ऊपर ओवरलैप हो जाता है। वहीं मार्जिन के लिए CSS स्पेसिफिकेशन में साफ लिखा है कि इनलाइन फ्लो में वर्टिकल मार्जिन का कोई असर नहीं होगा।

अगला लेसनPositioning & Z-Index