📝 CSS Display Property

CSS की display property यह decide करती है कि कोई HTML element webpage पर कैसे दिखाई देगा और layout में कैसे behave करेगा।

दूसरे शब्दों में, display property यह control करती है कि element:

• नई line से शुरू होगा या नहीं।
• दूसरे elements के साथ same line में रहेगा या नहीं।
• width और height लेगा या नहीं।
• Layout में कितनी जगह occupy करेगा।

हर HTML element की एक default display value होती है। हम CSS की मदद से उस default value को change कर सकते हैं।

उदाहरण के लिए:

• <div> → default रूप से block-level element
• <span> → default रूप से inline element

CSS में display की कई values होती हैं, लेकिन अभी हम मुख्य values समझेंगे:

1. block
2. inline
3. inline-block
4. none

---

🔹 1. display: block

display: block element को block-level element की तरह behave कराता है।

Block element सामान्यतः:

• नई line से शुरू होता है।
• Available horizontal space को occupy कर सकता है।
• इसके बाद आने वाला element सामान्यतः अगली line में दिखाई देता है।
• width और height आसानी से apply की जा सकती हैं।

Example:

<style>
div {
  display: block;
  background: lightblue;
  padding: 10px;
}
</style>

<div>This is a block element</div>
<div>This is another block element</div>

Output:

This is a block element

This is another block element

दोनों <div> अलग-अलग lines में दिखाई देंगे।

याद रखें:

Block = नई line

---

🔹 2. display: inline

display: inline element को inline-level element की तरह behave कराता है।

Inline elements:

• उसी line में दूसरे inline elements के साथ दिखाई देते हैं।
• सामान्यतः नई line से शुरू नहीं होते।
• इनके लिए width और height उसी तरह apply नहीं होती जैसे block या inline-block elements पर होती है।
• Text के flow के साथ रहते हैं।

Example:

<style>
ul li {
  display: inline;
  width: 100px;
  height: 40px;
  background: orange;
}
</style>

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

Output:

Apple   Mango   Banana

तीनों <li> elements same line में side by side दिखाई देंगे।

Important Point:

ऊपर width: 100px और height: 40px दिए गए हैं, लेकिन display: inline होने के कारण ये dimensions सामान्यतः वैसे apply नहीं होंगे जैसे block या inline-block में होते हैं।

याद रखें:

Inline = Same line

---

🔹 3. display: inline-block

inline-block को आप inline + block का combination समझ सकते हैं।

इसमें element:

• दूसरे elements के साथ same line में आ सकता है।
• लेकिन block-like properties का benefit ले सकता है।
• width और height apply की जा सकती हैं।
• margin और padding को भी अधिक useful तरीके से control किया जा सकता है।

Example:

<style>
ul li {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: orange;
}
</style>

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

Output:

Apple      Mango      Banana

Elements inline की तरह same line में दिखाई देंगे, लेकिन उनकी width और height भी set की जा सकती है।

याद रखें:

Inline-block = Same line + Width/Height

यह property पुराने या simple horizontal layouts में useful रही है, जैसे basic navigation items या small boxes को एक line में रखना।

---

🔹 4. display: none

display: none का उपयोग किसी element को hide/remove from layout करने के लिए किया जाता है।

जब किसी element पर display: none लगाया जाता है:

• Element webpage पर दिखाई नहीं देता।
• वह layout में space भी occupy नहीं करता।
• ऐसा लगता है जैसे element मौजूद ही नहीं है।

Example:

<style>
p {
  display: none;
}
</style>

<p>This paragraph is hidden.</p>

Output:

Paragraph दिखाई नहीं देगा और उसकी जगह भी webpage के layout में reserve नहीं होगी।

Important Difference:

display: none में element layout से भी हट जाता है।

इसके विपरीत visibility: hidden में element दिखाई नहीं देता, लेकिन उसकी space बनी रहती है।

p {
  visibility: hidden;
}

इसलिए:

display: none → Hide + Space remove

visibility: hidden → Hide + Space remains

---

🔄 Display Values का Comparison

Display Value	New Line	Same Line	Width/Height	Space Occupied
block	✅ Yes	❌ No	✅ Yes	✅ Yes
inline	❌ No	✅ Yes	⚠️ Normally not as block	✅ Yes
inline-block	❌ No	✅ Yes	✅ Yes	✅ Yes
none	❌	❌	❌	❌ No

---

🧠 Easy Trick

इन चारों को इस तरह याद रखें:

block

नई line + Width/Height

inline

Same line + Normal text flow

inline-block

Same line + Width/Height

none

पूरी तरह hide + Space भी remove

---

🔑 Real-Life Example

मान लीजिए आपके पास तीन boxes हैं:

Box 1
Box 2
Box 3

अगर display: block है:

┌─────────┐
│  Box 1  │
└─────────┘

┌─────────┐
│  Box 2  │
└─────────┘

┌─────────┐
│  Box 3  │
└─────────┘

अगर display: inline-block है:

┌─────────┐ ┌─────────┐ ┌─────────┐
│  Box 1  │ │  Box 2  │ │  Box 3  │
└─────────┘ └─────────┘ └─────────┘

और अगर display: none है, तो element webpage के layout में दिखाई ही नहीं देगा और उसकी जगह भी नहीं बचेगी।

---

📌 Quick Revision

display property → Element का layout behavior control करती है।

• block → New line
• inline → Same line
• inline-block → Same line + Width/Height
• none → Element hidden + No space

सबसे important concept:

Block = New Line

Inline = Same Line

Inline-block = Same Line + Dimensions

None = Hide Completely