CSS Display & Visibility Property Kya Hai ?

Aap jab web page design karte hain, tab aapko elements ko sahi tarike se dikhane aur hide karne ki zaroorat padti hai. Iske liye CSS me display, visibility, aur opacity ka use hota hai. Chaliye inhe detail me samajhte hain.

1. CSS Display Property

CSS ki display property kisi bhi element ka layout behavior define karti hai. Yani ki, ek element kaise appear hoga aur doosre elements ke sath kaise interact karega.

Jab hum kisi HTML element ka display type set karte hain, to hum uska structure aur positioning control karte hain. Agar ek element ka display none hota hai, to wo DOM (Document Object Model) se completely remove ho jata hai.

Common Display Values:

a. Block Elements (display: block;)

Block property ek aisi CSS property hai jo kisi element ko full width leke ek naye line me dikhane par majboor karti hai. Matlab, yeh element apne parent container ki poori width le lega aur uske baad agla element niche shift ho jayega.

Example Elements: <div>, <p>, <h1>, <section>, <article>

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

b. Inline Elements (display: inline;)

Inline elements sirf utni hi jagah lete hain jitni unko zaroorat hoti hai. Yeh naye line pe start nahi hote aur inka width aur height set nahi kiya ja sakta.

Example Elements: <span>, <a>, <strong>, <em>

span {
    display: inline;
    color: red;
}

c. Inline-Block Elements (display: inline-block;)

• Inline-block elements inline elements ki tarah same line me rehte hain lekin block elements ki tarah width aur height set kiya ja sakta hai.
• Yeh dono properties ka best combination hai.

Example Elements: <button>, <input>, <img>

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

d. None (display: none;)

Yeh kisi bhi element ko completely hide kar deta hai, aur uske liye koi space bhi reserve nahi karta.

.hidden {
    display: none;
}

Use Cases:

• Jab aap popup menus, modals ya dropdowns create karte hain, tab display: none; use kiya jata hai.
• Kisi element ko dynamically show/hide karne ke liye (JavaScript ke through).

2. CSS Visibility Property

Yeh property element ko hide karti hai bina uska space remove kiye.

Common Visibility Values:

• visible – Element dikhai deta hai (default value).
• hidden – Element hide hota hai, lekin uski jagah reserve rehti hai.

.hidden-box {
    visibility: hidden;
}

Difference between display: none; and visibility: hidden;

Use Cases:

• SEO aur accessibility ke liye visibility: hidden; better option ho sakta hai.
• Agar aap space ko maintain rakhna chahte hain to visibility: hidden; use karein.

3. CSS Opacity Property

Yeh property kisi element ki transparency control karne ke liye use hoti hai.

Opacity Values:

• opacity: 1; (Fully visible)
• opacity: 0.5; (50% transparent)
• opacity: 0; (Completely invisible)

.faded {
    opacity: 0.5;
}

Difference between opacity: 0; and visibility: hidden;

• opacity: 0; me element interactable rehta hai (matlab uspe click ho sakta hai).
• visibility: hidden; me element interact nahi karta.

Use Cases of Opacity:

• Hover effects aur animations ke liye useful hai.
• Background images ya modals me transparency apply karne ke liye.

Agar aapko SEO aur accessibility maintain karni hai to visibility: hidden; ya opacity: 0; ka use karein, kyunki display: none; elements ko search engines ignore kar sakte hain.

Quiz: Test Your Knowledge on CSS Display & Visibility Property

Bonus: Practical Application!

Aaj hi apne webpage par CSS Display & Visibility Property ka istemal karke dekhein!

CSS Display & Visibility Property ko sahi tareeke se samajhne ke liye different values jaise block, inline, inline-block, none, visible, aur hidden ka upayog karein aur apne webpage ke layout aur styling ko aur bhi effective banayein.