CSS Display aur Visibility Property Kya Hoti Hai?

1. The CSS display Property

CSS ki display property yeh decide karti hai ki ek HTML element page par kaise render hoga. Yeh property element ke layout behavior (woh kitni jagah lega aur doosre elements ke saath kaise behave karega) ko control karti hai.

Common display Values

display: block;

Block elements hamesha ek nayi line se shuru hote hain aur apne parent container ki poori available width le lete hain. Aap in par width, height, margin, aur padding apply kar sakte hain.

Common Examples: <div>, <p>, <h1>-<h6>, <ul>, <section>.

div { display: block; background-color: lightblue; }

display: inline;

Inline elements nayi line se shuru nahi hote aur sirf utni hi width lete hain jitni unke content ke liye zaroori hai. In par width, height, aur vertical margins (margin-top, margin-bottom) apply nahi hote.

Common Examples: <span>, <a>, <strong>, <em>.

span { display: inline; color: red; }

display: inline-block;

Yeh inline aur block ka best combination hai. Element ek hi line me rehta hai (like inline) lekin aap uspe width, height, aur vertical margins apply kar sakte hain (like block).

Common Examples: <button>, <input>, <img>.

.box { display: inline-block; width: 100px; height: 50px; }

display: none;

Yeh property element ko page se completely remove kar deti hai. Element na toh dikhta hai aur na hi uski jagah layout me rehti hai. Screen readers bhi ise ignore kar dete hain.

.hidden { display: none; }

2. The CSS visibility Property

visibility property ka use element ko hide ya show karne ke liye hota hai, lekin yeh element ki jagah ko layout me banaye rakhta hai.

Common visibility Values

• visibility: visible; (Default): Element dikhai deta hai.
• visibility: hidden;: Element hide ho jaata hai, lekin uski jagah khali rehti hai. Woh space layout ko affect karta rehta hai.

.hidden-box { visibility: hidden; }

display: none vs. visibility: hidden

Yeh ek bohot common interview question hai. Inke beech ka mukhya antar unka layout par asar hai.

Bonus: The opacity Property

opacity property element ki transparency (paardarshita) ko control karti hai. opacity: 0; element ko visibility: hidden; ki tarah hi poori tarah se invisible bana deta hai.

Lekin, ek mukhya antar hai: opacity: 0; wala element abhi bhi interactive rehta hai. Agar uspar koi link ya button hai, toh user uspar click kar sakta hai.

Key Takeaways

• display: block;: Nayi line se shuru, poori width leta hai.
• display: inline;: Same line me rehta hai, content jitni width leta hai.
• display: none;: Element ko poori tarah se hata deta hai.
• visibility: hidden;: Element ko chupata hai, lekin uski jagah layout me bani rehti hai.
• Layout ko disturb kiye bina hide karna ho toh visibility: hidden; use karein. Layout ko reflow karwana ho toh display: none; use karein.