CSS पाठ्यपुस्तक — पाठ 4 — display गुण (Property)। div और span के बीच अंतर।

पिछले पाठों में हमने CSS फ़ाइल को जोड़ा था और थोड़ा CSS कोड लिखा था ताकि देख सकें कि यह कैसे काम करता है। इस पाठ में हम एक महत्वपूर्ण गुण display को समझेंगे। display गुण यह निर्धारित करता है कि कोई HTML टैग वेब पेज पर कैसे प्रदर्शित होगा — क्या वह टेक्स्ट की तरह एक पंक्ति में दिखाई देगा या फिर एक ब्लॉक के रूप में, जिसकी अपनी ऊँचाई और चौड़ाई होती है।

आइए सबसे पहले देखें कि टैग्स डिफ़ॉल्ट रूप से कैसे प्रदर्शित होते हैं: <div> एक ब्लॉक की तरह दिखता है, जबकि <span> एक पंक्ति में टेक्स्ट की तरह दिखता है। चलिए एक परीक्षण पंक्ति बनाते हैं और उसे <span> टैग में लपेटते हैं।

display: inline

span टैग टेक्स्ट की तरह एक पंक्ति में प्रदर्शित होता है (सिवाय इसके कि कुछ भाषाओं जैसे जापानी में अक्षर स्तंभ में दिखाई देते हैं)। इस मोड में span की न तो ऊँचाई होती है न चौड़ाई। आप display: inline तत्व के लिए ऊँचाई या चौड़ाई निर्धारित नहीं कर सकते, क्योंकि टेक्स्ट को अन्य विशेषताओं जैसे फ़ॉन्ट का आकार, फ़ॉन्ट फ़ैमिली, रंग, अक्षरों के बीच की दूरी, लाइन-हाइट, और पैडिंग से मापा जाता है।

इसलिए यदि आप किसी टैग के लिए ऊँचाई, चौड़ाई या मार्जिन निर्धारित करना चाहते हैं, तो आपको अगले प्रकार का display उपयोग करना चाहिए।

display: block

block मान डिफ़ॉल्ट रूप से <div> टैग के लिए उपयोग किया जाता है। यह आपको चौड़ाई, ऊँचाई और मार्जिन सेट करने की अनुमति देता है। इस प्रकार, आप वेबसाइट पर एक ब्लॉक क्षेत्र बना सकते हैं और उसमें टेक्स्ट, छवियाँ या अन्य ब्लॉक सम्मिलित कर सकते हैं।

हम span टैग को भी display: block दे सकते हैं। उदाहरण के लिए: <span class="block">text</span> — इससे span में ऊँचाई और चौड़ाई आ जाएगी और वह एक ब्लॉक की तरह व्यवहार करने लगेगा।

block मान की एक और विशेषता यह है कि ब्लॉक डिफ़ॉल्ट रूप से उपलब्ध पूरी चौड़ाई (100%) घेर लेता है। हालाँकि, आप ब्लॉक की ऊँचाई को height: 100% नहीं दे सकते — ब्लॉक अपनी सामग्री की ऊँचाई के अनुसार स्थान लेता है। यदि आवश्यक हो, तो ऊँचाई को पिक्सल में निर्धारित किया जा सकता है (उदाहरण के लिए, 800px), लेकिन पूरे स्क्रीन की ऊँचाई पर फैलाना सीधे संभव नहीं है। इस विषय पर हम आने वाले पाठों में विस्तार से चर्चा करेंगे।

display: inline-block

कभी-कभी हमें चाहिए कि तत्व (जैसे छवियाँ) ब्लॉक की तरह व्यवहार करें — यानी उनकी चौड़ाई, ऊँचाई और मार्जिन हों — लेकिन साथ ही वे पूरी चौड़ाई (100%) न घेरें, बल्कि एक-दूसरे के बगल में दिखाई दें। ऐसे मामलों में inline-block का उपयोग किया जाता है। यह मान inline और block दोनों के गुणों को संयोजित करता है। आप इसे किसी भी ब्लॉक या span पर लागू कर सकते हैं।

display: table

table मान डिफ़ॉल्ट रूप से तालिकाओं (tables) के लिए उपयोग किया जाता है। ब्लॉकों के विपरीत, तालिका को ऊँचाई में 100% तक फैलाया जा सकता है। हालाँकि, आधुनिक वेब-डिज़ाइन में हम लेआउट के लिए ब्लॉक संरचना (block layout) का उपयोग करते हैं, क्योंकि तालिकाएँ केवल सारणीबद्ध डेटा (tabular data) प्रदर्शित करने के लिए ही उपयुक्त हैं।

display: list-item

जब किसी तत्व को display: list-item दिया जाता है (जैसे कि डिफ़ॉल्ट रूप से <li> टैग), तो उसके सामने एक मार्कर (आमतौर पर एक काला बिंदु) प्रदर्शित होता है।

display: none

यदि किसी क्लास, टैग या ID को यह मान दिया जाए, तो वह तत्व वेबसाइट पर दिखाई देना बंद कर देगा! इस गुण का उपयोग करते समय सावधानी रखें, क्योंकि इससे कोई आवश्यक तत्व भी छिप सकता है और बाद में यह समझना मुश्किल हो सकता है कि वह क्यों गायब है।

हालाँकि, यदि ग्राहक कहे कि किसी चीज़ (जैसे RSS आइकन) को साइट से हटा दें, तो आप इसे इस तरह कर सकते हैं:

.rss {
  display: none;
}

बेशक, आदर्श रूप से तत्व को टेम्पलेट से ही हटा देना चाहिए ताकि वह बिल्कुल न दिखे, लेकिन यदि उसे कोड से हटाना असुविधाजनक हो, तो CSS के माध्यम से उसे आसानी से छिपाया जा सकता है।