Basics
display Property
block, inline, inline-block, none
💡 display property decide karti hai element "kaise behave karta hai" layout mein — block ek poora shelf lene wali cheez hai (apni line), inline ek chhota item hai jo doosre items ke saath fit ho jaata hai, none ek invisible cheez hai (jaise shelf se hata diya gaya).
display: block — poori width leta hai, naya element next line par (div, p, h1 default block hain). display: inline — sirf content jitni jagah, same line continue (span, a default inline hain) — width/height set nahi kar sakte inline par. display: inline-block — inline jaisa flow, lekin width/height set kar sakte ho (best of both). display: none — element completely hide, jaise exist hi nahi karta (space bhi nahi leta).
.block-item {
display: block; /* poori line, apni jagah */
}
.inline-item {
display: inline; /* same line, width/height ignore hote hain */
}
.inline-block-item {
display: inline-block; /* same line, LEKIN width/height set kar sakte ho */
width: 100px;
height: 50px;
}
.hidden {
display: none; /* completely gayab, koi space nahi leta */
}🧱
display property decide karti hai element "kaise behave karta hai" layout mein — block ek poora shelf lene wali cheez hai (apni line), inline ek chhota item hai jo doosre items ke saath fit ho jaata hai, none ek invisible cheez hai (jaise shelf se hata diya gaya).
1 / 2
⚡ Quick Recap
- block = poori line, inline = sirf content jitni jagah
- inline-block = inline flow + width/height control
- none = completely hidden, jagah bhi nahi leta
On this page (1 subtopics)
Teeno "hide" karte hain, lekin differently: display: none (layout se completely gayab, no space), visibility: hidden (invisible, lekin space reserved), opacity: 0 (invisible, space reserved, LEKIN still clickable/interactive — click events still fire hote hain).
.a { display: none; } /* gayab, no space */
.b { visibility: hidden; } /* invisible, space reserved */
.c { opacity: 0; } /* invisible, space reserved, ABHI BHI clickable */Common Mistake: opacity: 0 wale elements abhi bhi interactive rehte hain (clicks, tab-focus) — agar genuinely element ko "remove" karna hai interaction se bhi, display: none ya visibility: hidden use karo, opacity: 0 nahi.