display प्रॉपर्टी वेबपेज के लेआउट के लिए अभिन्न है। डिस्प्ले प्रॉपर्टी निर्धारित करती है कि कोई एलिमेंट उसके आसपास के एलिमेंट्स के संबंध में कैसे प्रदर्शित होता है। इस CSS प्रॉपर्टी के कई मान हैं; सबसे अधिक उपयोग किए जाने वाले मानों में inline, block, और inline-block शामिल हैं। इस लेख में हम इन तीन CSS डिस्प्ले मानों के कार्यान्वयन और अंतर पर चर्चा करेंगे।
सिंटैक्स
display: inline; display: block; display: inline-block;
इंलाइन, ब्लॉक, और इंलाइन-ब्लॉक डिस्प्ले के बीच अंतर
इंलाइन (Inline)
इंलाइन-लेवल एलिमेंट्स इंलाइन प्रदर्शित होते हैं, अर्थात इस एलिमेंट और पैरेंट या पिछले एलिमेंट के बीच कोई लाइन ब्रेक या पृथक्करण नहीं होता है। यह केवल आवश्यक चौड़ाई लेता है; यदि आप एलिमेंट में कस्टम चौड़ाई और ऊंचाई प्रॉपर्टीज जोड़ने का प्रयास करते हैं, तो प्रॉपर्टीज को नजरअंदाज कर दिया जाएगा।
डिफ़ॉल्ट रूप से इंलाइन एलिमेंट्स: <a>, <span>, <img>, <input>, <strong>, <em>, <b>, <button>, <label>, <select>, <small>, <code>, <br> आदि।
ब्लॉक (Block)
ब्लॉक-लेवल एलिमेंट्स एक नई लाइन पर प्रदर्शित होते हैं, और जब तक चौड़ाई प्रॉपर्टी लिखी नहीं जाती, तब तक सभी संभावित चौड़ाई लेते हैं। इंलाइन एलिमेंट्स के विपरीत, यदि आप कस्टम चौड़ाई और ऊंचाई प्रॉपर्टीज जोड़ते हैं, तो उन प्रॉपर्टीज का सम्मान किया जाएगा।
डिफ़ॉल्ट रूप से ब्लॉक एलिमेंट्स: <div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer>, <nav>, <ul>, <ol>, <li>, <table>, <form> आदि।
इंलाइन-ब्लॉक (Inline-Block)
इस बात को ध्यान में रखते हुए, इंलाइन-ब्लॉक एलिमेंट्स इंलाइन और ब्लॉक एलिमेंट्स दोनों का सर्वश्रेष्ठ संयोजन करते हैं: इंलाइन-ब्लॉक्स इंलाइन प्रदर्शित होते हैं और कस्टम चौड़ाई और ऊंचाई प्रॉपर्टीज जोड़ने की क्षमता रखते हैं। यह उन्हें आदर्श बनाता है जब आप किसी साइट के डिस्प्ले को स्टाइल करना चाहते हैं, और एलिमेंट्स को अगल-बगल बैठना पसंद करेंगे।
तुलना तालिका
| विशेषता | inline | block | inline-block |
|---|---|---|---|
| नई लाइन पर शुरू | नहीं | हां | नहीं |
| चौड़ाई/ऊंचाई सेट कर सकते हैं | नहीं | हां | हां |
| अगल-बगल बैठ सकते हैं | हां | नहीं (फ्लोट के बिना) | हां |
| उदाहरण | span, a, img | div, p, h1 | बटन, इंपुट (कुछ), कस्टम |
निष्कर्ष
इस लेख में, हमने CSS डिस्प्ले प्रॉपर्टी के तीन मानों को लागू करने पर चर्चा की: इंलाइन, ब्लॉक, और इंलाइन-ब्लॉक, और इंलाइन-लेवल और ब्लॉक-लेवल डिस्प्ले का उपयोग करने के फायदे और नुकसान। inline-block विशेष रूप से उपयोगी है जब आप एलिमेंट्स को क्षैतिज रूप से संरेखित करना चाहते हैं लेकिन फिर भी उनके आयामों को नियंत्रित करना चाहते हैं।
