सीएसएस लेआउट - डिस्प्ले प्रोपर्टी

display प्रतिशत लेआउट को नियंत्रित करने के लिए सबसे महत्वपूर्ण CSS प्रतिशत है।

display प्रतिशत

display प्रतिशत निर्धारित करता है कि एलीमेंट कैसे/किस तरह दिखाया जाए।

प्रत्येक HTML एलीमेंट को एक डिफ़ॉल्ट display मूल्य होता है जो इसके एलीमेंट क़िस्म पर निर्भर करता है। अधिकांश एलीमेंटों का डिफ़ॉल्ट display मूल्य block या inline.

पैनल दिखाने के लिए क्लिक करें

यह पैनल एक <div> एलीमेंट को शामिल करता है जो डिफ़ॉल्ट में छुपा हुआ है।（display: none)

यह CSS द्वारा शैलीबद्ध है, हम इसे JavaScript के द्वारा दिखाते हैं (इसे बदलें display: block)

ब्लॉक एलिमेंट (block element)

ब्लॉक एलिमेंट हमेशा नए पड़ाव पर शुरू होते हैं, और उपलब्ध स्थान की पूरी चौड़ाई को ले लेते हैं (जितना हो सके बाईं और दायाँ तरफ फैलते हैं).

यह <div> एलिमेंट ब्लॉक एलिमेंट है.

कुछ ब्लॉक एलिमेंट के उदाहरण:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

इनलाइन एलिमेंट (inline element)

इनलाइन एलिमेंट नए वाक्य में शुरू नहीं होते, वही चौड़ाई को ले लेते हैं (सिर्फ जितनी चौड़ाई की जरूरत है).

यह पैराग्राफ में हैइनलाइन <span> एलिमेंट.

इनलाइन एलिमेंट के कुछ उदाहरण:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; आमतौर पर JavaScript के साथ इस्तेमाल किया जाता है, ताकि एलिमेंट को छुपाया जाए और दिखाया जाए, बिना कि इसे मिटाया जाए और फिर फिर बनाया जाए. यदि आप इस लक्ष्य को कैसे प्राप्त कर सकते हैं यह जानना चाहते हैं, तो इस पृष्ठ पर अंतिम उदाहरण को देखें。

डिफॉल्ट में<script> एलिमेंट द्वारा display: none;.

डिफॉल्ट Display मूल्य को अधिसूचित करना

जैसा कि पहले कहा गया है, हर एलिमेंट का एक डिफॉल्ट display मूल्य होता है. लेकिन, आप इसे अधिसूचित कर सकते हैं.

इनलाइन एलिमेंट को ब्लॉक एलिमेंट में बदलना और वापस, वेब स्टैंडर्ड को अनुसरते हुए पृष्ठ को विशेष तरीके से दिखाने के लिए बहुत उपयोगी है.

एक आम उदाहरण यह है कि एक इनलाइन एलिमेंट को रेखाबद्ध मेनू के लिए बनाया जाए. <li> एलिमेंट:

उदाहरण

li {
  display: inline;
}

अपने आप से प्रयास कीजिए

ध्यान दें:एलिमेंट के display गुण को सेट करना केवलएलिमेंट के दिखावेऔर एलिमेंट के प्रकार को बदलेगा नहीं. इसलिए, जो एलिमेंट के दिखावे को निर्धारित करते हैं display: block; इन इनलाइन एलिमेंट में अन्य ब्लॉक एलिमेंट को शामिल नहीं किया जा सकता है.

नीचे दिए गए उदाहरण में <span> एलिमेंट को ब्लॉक एलिमेंट के रूप में दिखाया जाएगा:

उदाहरण

span {
  display: block;
}

अपने आप से प्रयास कीजिए

नीचे दिए गए उदाहरण में <a> एलिमेंट को ब्लॉक एलिमेंट के रूप में दिखाया जाएगा:

उदाहरण

a {
  display: block;
}

अपने आप से प्रयास कीजिए

छुपाया जाने वाले एलिमेंट - display:none या visibility:hidden?

display:none

visibility: hidden

रीसेट

द्वारा display गुण को निर्धारित किया गया है निष्प्रयोग एलिमेंट को छुपाया जा सकता है. इस एलिमेंट को छुपाया जाएगा और पृष्ठ इस तरह दिखाया जाएगा कि इस एलिमेंट का उपस्थिति नहीं है:

उदाहरण

h1.hidden {
  display: none;
}

अपने आप से प्रयास कीजिए

visibility: hidden; एलिमेंट को छुपाया जा सकता है.

लेकिन, इस एलिमेंट अभी भी पहले के समान स्थान को ले लेगा. एलिमेंट छुपाया जाएगा, लेकिन यह लेआउट पर प्रभाव डालेगा:

उदाहरण

h1.hidden {
  visibility: hidden;
}

अपने आप से प्रयास कीजिए

अधिक इंस्टेंस

display: none; और visibility: hidden; के बीच का अंतर
display: none; और visibility: hidden; के बीच का अंतर
CSS और JavaScript का संयोजन करके सामग्री दिखाना
इस इंस्टेंस को देखें कि कैसे CSS और JavaScript का उपयोग करके इलीमेंट दिखाया जाता है。

CSS Display/Visibility एट्रिब्यूट

एट्रिब्यूट वर्णन
display एलीमेंट को कैसे दिखाना चाहिए
visibility निर्दिष्ट एलीमेंट को दिखाना चाहिए कि नहीं