CSS डिस्प्ले प्रॉपर्टी के साथ काम करना

CSS Display प्रॉपर्टी

CSS Display प्रॉपर्टी का उपयोग यह सेट करने के लिए किया जाता है कि एलिमेंट वेब पेज पर कैसे प्रदर्शित होता है।

सामान्य Display मान:

क्रमांक	प्रॉपर्टी मान	विवरण
1	inline	एलिमेंट को इंलाइन एलिमेंट के रूप में प्रदर्शित करता है
2	block	एलिमेंट को ब्लॉक एलिमेंट के रूप में प्रदर्शित करता है
3	contents	कंटेनर को गायब करता है, बच्चे एलिमेंट्स को DOM में अगले स्तर पर ले जाता है
4	flex	एलिमेंट को ब्लॉक-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है
5	grid	एलिमेंट को ब्लॉक-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है
6	inline-block	एलिमेंट को इंलाइन-लेवल ब्लॉक कंटेनर के रूप में प्रदर्शित करता है
7	inline-flex	एलिमेंट को इंलाइन-लेवल फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है
8	inline-grid	एलिमेंट को इंलाइन-लेवल ग्रिड कंटेनर के रूप में प्रदर्शित करता है
9	inline-table	एलिमेंट को इंलाइन-लेवल टेबल के रूप में प्रदर्शित करता है
10	none	एलिमेंट को पूरी तरह छिपाता है (स्पेस नहीं लेता)

उदाहरण 1: display: none और display: inline

<!DOCTYPE html>
<html>
<head>
<style>
span {
  background-color: orange;
  color: white;
}
p.demo {
  display: none;
}
span.demo1 {
  display: inline;
}
</style>
</head>
<body>
<h1>मैच विवरण</h1>
<div>
  मैच <p class="demo">सुबह 9 बजे</p> 10 बजे 20 दिसंबर को शुरू होगा।
</div>
<div>
  मैच <span class="demo1">शाम 5 बजे</span> 20 दिसंबर को समाप्त होगा।
</div>
</body>
</html>

आउटपुट

"सुबह 9 बजे" छिपा होगा (display: none)। "शाम 5 बजे" इंलाइन स्पैन के रूप में नारंगी बैकग्राउंड के साथ दिखेगा।

उदाहरण 2: display: block और display: inline-block

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: orange;
  color: white;
}
p.demo1 {
  display: block;
}
p.demo2 {
  display: inline-block;
}
</style>
</head>
<body>
<h1>मैच विवरण</h1>
<div>
  मैच <p class="demo1">सुबह 10 बजे</p> 19 दिसंबर 2019 को शुरू होगा।
</div>
<div>
  मैच <p class="demo2">शाम 5 बजे</p> 19 दिसंबर 2019 को समाप्त होगा।
</div>
</body>
</html>

आउटपुट

पहला समय (10AM) ब्लॉक एलिमेंट के रूप में नई लाइन पर। दूसरा समय (5PM) इंलाइन-ब्लॉक के रूप में उसी लाइन में।

मॉडर्न Layout मान (Flexbox & Grid):

.container {
  display: flex;        /* फ्लेक्सबॉक्स लेआउट */
  display: grid;        /* CSS ग्रिड लेआउट */
  display: inline-flex; /* इंलाइन फ्लेक्स कंटेनर */
  display: inline-grid; /* इंलाइन ग्रिड कंटेनर */
}

display: contents (विशेष):

कंटेनर को रेंडर ट्री से हटा देता है, लेकिन बच्चे बने रहते हैं। CSS ग्रिड/फ्लेक्स में ग्रैंडचिल्ड्रेन को ग्रिड/फ्लेक्स आइटम्स बनाने के लिए उपयोगी।

सर्वोत्तम अभ्यास:

लेआउट के लिए फ्लेक्सबॉक्स/ग्रिड पसंद करें
display: none बनाम visibility: hidden - पूर्व स्पेस हटाता है, बाद में स्पेस रखता है
सेमांटिक HTML + CSS लेआउट = बेहतर एक्सेसिबिलिटी