display सबसे बुनियादी CSS प्रॉपर्टीज़ में से एक है — यह नियंत्रित करती है कि कोई एलिमेंट अपना बॉक्स कैसे जनरेट करता है और उसके चिल्ड्रन का लेआउट कैसे होता है।
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display दरअसल दो चीज़ें सेट करती है: बॉक्स बाहर से कैसे व्यवहार करता है (block/inline) और अपने चिल्ड्रन का लेआउट अंदर कैसे करता है (flow/flex/grid)। display: flex का मतलब है "यह बॉक्स block-level है, और इसके चिल्ड्रन flex items हैं।"
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
एक मुख्य अंतर: display: none लेआउट को समेट देती है (और स्क्रीन रीडर्स से भी छिपा देती है); visibility: hidden वहाँ एक खाली जगह छोड़ देती है जहाँ एलिमेंट था। किसी एलिमेंट को सचमुच हटाने के लिए display: none का उपयोग करें, और लेआउट को बनाए रखते हुए छिपाने के लिए visibility: hidden का।
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
आधुनिक लेआउट लगभग पूरी तरह flex (1D — rows या columns) और grid (2D — rows और columns एक साथ) पर बना है।
display किसी एलिमेंट के पूरे लेआउट व्यवहार को निर्धारित करती है।
block बनाम inline बनाम inline-block जानना डिफ़ॉल्ट flow को समझाता है; flex/grid आधुनिक लेआउट का मूल हैं; और none बनाम visibility का अंतर एक अक्सर पूछा जाने वाला, व्यावहारिक रूप से महत्वपूर्ण विवरण है।