CSS Display
display property पूरे CSS में शायद सबसे ज़्यादा important अकेली property हो सकती है, क्योंकि यह तय करती है कि कोई element overall layout में कैसे behave करता है: क्या वह अपनी अलग line पर stack होता है, text के साथ inline बैठता है, या एक container बन जाता है जो अपने ही children को पूरी तरह अलग तरीके से arrange करता है।
block elements (जैसे div और p) vertically stack होते हैं और अपनी पूरी line ले लेते हैं। inline elements (जैसे span और a) text के अंदर flow करते हैं और उनकी width या height सीधे set नहीं की जा सकती। inline-block दोनों को मिलाता है, inline की तरह flow करता है लेकिन block की तरह width और height accept करता है। display: none किसी element को page से पूरी तरह हटा देता है। और flex तथा grid किसी element को अपने children को arrange करने के लिए एक powerful layout container बना देते हैं।
cookiescursor.com जैसी site पर कोई भी असली layout बनाने की foundation display को समझना है, क्योंकि यह वह basic behavior control करता है जिससे हर एक element शुरू होता है।
In this page:
Syntax
selector {
display: block | inline | inline-block | flex | grid | none;
}block, inline, और inline-block
block elements पूरी available width लेते हैं और हमेशा एक नई line पर शुरू होते हैं। inline elements आस-पास के text के अंदर flow करते हैं और सिर्फ उतनी ही width लेते हैं जितनी उनके content को चाहिए। inline-block flow के लिए inline की तरह behave करता है, लेकिन block element की तरह width, height, और vertical margin accept करता है।
Note:
- अगर आपको किसी element को दूसरे content के साथ बैठना है लेकिन फिर भी एक set width या height चाहिए, तो inline-block अक्सर बिल्कुल वही है जो आप चाहते हैं।
- Accepted values:
- block — पूरी width, नई line पर शुरू होता है
- inline — text के अंदर flow करता है; width और height को नज़रअंदाज़ करता है
- inline-block — inline flow, width और height accept करता है
- none — element को layout से हटा देता है
- flex — एक-dimensional flex container
- grid — दो-dimensional grid container
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
एक असली inline element पर width और height declarations को browser बस नज़रअंदाज़ कर देता है।
उदाहरण: block, inline, and inline-block
<style>
.block {
display: block;
background: dodgerblue;
color: white;
padding: 6px;
}
.inline {
display: inline;
background: coral;
color: white;
padding: 6px;
}
.inline-block {
display: inline-block;
width: 100px;
background: mediumseagreen;
color: white;
padding: 6px;
}
</style>
<div class="block">Block</div>
<span class="inline">Inline</span>
<span class="inline-block">Inline-block</span>display: none
display: none किसी element को page से पूरी तरह हटा देता है, visually भी और document के layout flow से भी, जैसे वह कभी था ही नहीं।
Note:
- display: none को content को dynamically दिखाने या छुपाने के लिए अक्सर JavaScript से toggle किया जाता है, जैसे कोई expandable FAQ answer।
- Accepted values:
- none — element कोई box generate नहीं करता और कोई जगह नहीं लेता
- block — block display restore करता है
- inline — text के अंदर flow करता है
- inline-block — block sizing के साथ inline flow
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
display: none से hidden किया गया element ज़्यादातर assistive technology से भी हट जाता है, इसलिए यह सुनिश्चित करें कि hidden content सच में पूरी तरह inaccessible होना चाहिए।
उदाहरण: display: none
<style>
.hidden {
display: none;
}
</style>
<p>Visible paragraph</p>
<p class="hidden">Removed from layout entirely</p>display: none बनाम visibility: hidden
display: none किसी element और उसकी जगह को layout से पूरी तरह हटा देता है। visibility: hidden किसी element को invisible बना देता है लेकिन उसकी जगह page पर reserved रखता है, जैसे एक invisible box अभी भी वहाँ बैठा हो।
Note:
- visibility: hidden इस्तेमाल करें जब आपको layout position preserve करनी हो (जैसे content load होने पर jump से बचना), और display: none जब आप चाहें कि element सच में गायब हो जाए।
- Accepted values:
- visible — normally दिखाया जाता है (initial value)
- hidden — invisible लेकिन फिर भी जगह लेता है
- collapse — table rows या columns को छुपाता है; कहीं और hidden की तरह
- opacity — 0 से 1, भी इसे invisible बनाता है लेकिन clickable रहता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
क्योंकि visibility: hidden फिर भी जगह reserve करता है, यह हैरान कर सकता है अगर आप उम्मीद कर रहे थे कि layout display: none जैसा collapse होगा।
उदाहरण: display: none vs visibility: hidden
<style>
.gone {
display: none;
}
.invisible {
visibility: hidden;
}
</style>
<p class="gone">Gone, no space reserved</p>
<p class="invisible">Invisible, space reserved</p>
<p>Next element</p>display: flex
किसी container पर display: flex set करना उसे एक flex container बना देता है, जो आपको उसके direct children को row या column में arrange करने के लिए powerful, simple tools देता है, alignment और spacing पर आसान control के साथ।
Note:
- मुट्ठी भर items, जैसे navigation bar या cards की एक row, को एक direction में arrange करने के लिए flex एक बेहतरीन default choice है।
- Accepted values:
- flex — block-level flex container
- inline-flex — inline-level flex container
- flex-direction — row, row-reverse, column, column-reverse
- justify-content — flex-start, flex-end, center, space-between, space-around, space-evenly
- align-items — stretch, center, flex-start, flex-end, baseline
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
display: flex सिर्फ उस container के direct children को असर करता है जिस पर वह लागू है, tree में आगे कहीं deeply nested grandchildren को नहीं।
उदाहरण: display: flex
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>display: grid
किसी container पर display: grid set करना उसे एक grid container बना देता है, जो आपको उसके children को rows और columns के एक genuine two-dimensional grid में layout करने देता है, ज़्यादा complex page layouts के लिए ideal।
Note:
- जब आपको rows और columns दोनों को एक साथ control करना हो, जैसे कोई card layout जिसे fixed संख्या के columns में wrap करना हो, तो grid इस्तेमाल करें।
- Accepted values:
- grid — block-level grid container
- inline-grid — inline-level grid container
- grid-template-columns — जैसे repeat(3, 1fr)
- gap — rows और columns के बीच spacing
- grid-template-areas — named layout regions
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
Grid और flex overlapping लेकिन अलग समस्याएँ solve करते हैं, grid two-dimensional layouts में बेहतरीन है, जबकि flex एक अकेली row या column के लिए आमतौर पर simpler है।
उदाहरण: display: grid
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- किसी inline element पर width और height set करने की कोशिश करना और यह देखकर confused होना कि कुछ नहीं होता।
- display: none (element को पूरी तरह हटाता है) को visibility: hidden (इसे hide करता है लेकिन जगह रखता है) के साथ confuse करना।
- modern layout needs के लिए flex या grid इस्तेमाल करने के बजाय आदतन float-based layouts की तरफ़ जाना।
चैप्टर सारांश
- block elements अपनी अलग line पर stack होते हैं; inline elements text के अंदर flow करते हैं और width/height को नज़रअंदाज़ करते हैं।
- inline-block inline flow को block-style sizing control के साथ combine करता है।
- display: none किसी element और उसकी जगह को पूरी तरह हटा देता है; visibility: hidden इसे hide करता है लेकिन उसकी जगह reserved रखता है।
ब्राउज़र सपोर्ट
यहाँ बताए गए सभी standard CSS display values, flex और grid सहित, हर modern browser में supported हैं।
🔒
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: