CSS display गुण

परिभाषा और उपयोग

display गुण एलिमेंट को जो प्रदर्शन बॉक्स प्रदान करता है, इसे परिभाषित करता है。

वर्णन

यह गुण डिजाइन बनाने के दौरान एलिमेंट को जो प्रदर्शन बॉक्स प्रदान करता है, इसे परिभाषित करने के लिए उपयोग किया जाता है। HTML जैसे दस्तावेज़ प्रकारों के लिए, display का अनुप्रयोग करते समय सावधानी से करना जरूरी है क्योंकि यह वर्तमान HTML में परिभाषित प्रदर्शन रूपरेखा का उल्लंघन कर सकता है। XML के लिए, XML को अंतर्निहित ऐसी रूपरेखा नहीं होती, इसलिए सभी display अनिवार्य हैं。

टिप्पणी:CSS2 में मान compact और marker हैं, लेकिन व्यापक समर्थन की कमी के कारण, इसे CSS2.1 से हटा दिया गया है。

अन्य संदर्भ:

CSS पाठ्यक्रम:CSS स्थानांतरण

HTML DOM संदर्भ दस्तावेज़:display गुण

उदाहरण

पैराग्राफ को इनलाइन बॉक्स बनाएं:

p.inline
  {
  display:inline;
  }

अपने आप सिखें

CSS व्याकरण

display: मान;

प्रयोग-गुण

मान वर्णन
none यह एलिमेंट प्रदर्शित नहीं होगा。
block इस एलिमेंट को ब्लॉक एलिमेंट के रूप में प्रदर्शित किया जाएगा, इस एलिमेंट के आगे और पीछे बदलाव होगा。
inline डिफ़ॉल्ट। इस एलिमेंट को इनलाइन एलिमेंट के रूप में प्रदर्शित किया जाएगा, एलिमेंट के आगे और पीछे बदलाव नहीं होगा。
inline-block इनलाइन ब्लॉक एलिमेंट (CSS2.1 में नया मान)
list-item यह एलिमेंट सूची के रूप में प्रदर्शित होगा。
run-in यह एलिमेंट अनुसार पैरालेक्स के रूप में या इनलाइन एलिमेंट के रूप में प्रदर्शित होगा。
compact CSS में एक नाम compact है, लेकिन व्यापक समर्थन की कमी के कारण, इसे CSS2.1 से हटा दिया गया है。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table इस एलिमेंट को एक ब्लॉक तालिका के रूप में दिखाया जाएगा (जैसे <table>), तालिका के आगे और पीछे बदले होते हैं
inline-table इस एलिमेंट को एक इनलाइन तालिका के रूप में दिखाया जाएगा (जैसे <table>), तालिका के आगे और पीछे बदले नहीं होते
table-row-group इस एलिमेंट को एक या अधिक पदों के समूह के रूप में दिखाया जाएगा (जैसे <tbody>)
table-header-group इस एलिमेंट को एक या अधिक पदों के समूह के रूप में दिखाया जाएगा (जैसे <thead>)
table-footer-group इस एलिमेंट को एक या अधिक पदों के समूह के रूप में दिखाया जाएगा (जैसे <tfoot>)
table-row इस एलिमेंट को एक तालिका पद के रूप में दिखाया जाएगा (जैसे <tr>)
table-column-group इस एलिमेंट को एक या अधिक स्तम्भों के समूह के रूप में दिखाया जाएगा (जैसे <colgroup>)
table-column इस एलिमेंट को एक कोष्ठक स्तम्भ के रूप में दिखाया जाएगा (जैसे <col>)
table-cell इस एलिमेंट को एक तालिका कोष्ठक के रूप में दिखाया जाएगा (जैसे <td> और <th>)
table-caption इस एलिमेंट को एक तालिका शीर्षक के रूप में दिखाया जाएगा (जैसे <caption>)
inherit इसका प्रावधान है कि पितृ एलिमेंट से display गुण का मूल्य विरासत किया जाना चाहिए。

तकनीकी विवरण

मूलभूत मूल्य: inline
विरासत की गुणता: नहीं
संस्करण: CSS1
जेसक्रिप्ट व्याकरण: object.style.display="inline"

TIY उदाहरण

कैसे एलिमेंट को इनलाइन स्टाइल में दिखाया जाता है
इस उदाहरण में देखा जाता है कि कैसे एलिमेंट को इनलाइन स्टाइल में दिखाया जाता है。
कैसे एलिमेंट को ब्लॉक स्टाइल में दिखाया जाता है
इस उदाहरण में देखा जाता है कि कैसे एलिमेंट को ब्लॉक स्टाइल में दिखाया जाता है。

ब्राउज़र समर्थन

तालिका में दिए गए नंबरों से प्रत्यक्ष समर्थन देने वाले पहले ब्राउज़र का संस्करण का पता लगाया जाता है。

च्रोम IE / एज फ़ायरफॉक्स सैफारी ओपेरा
4.0 8.0 3.0 3.1 7.0

टिप्पणी:यदि !DOCTYPE निर्दिष्ट किया गया है, तो Internet Explorer 8 (और उससे ऊपर) इन गुणों के लिए समर्थन देता है: "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" और "inherit"。