<span> तत्व <div> . के समान एक सामान्य HTML तत्व हैं . यदि आपको याद हो, divs एक सामान्य कंटेनर है जो मुख्य रूप से किसी वेबपेज के लेआउट के लिए उपयोग किया जाता है और जितना हो सके उतना स्थान लेता है क्योंकि वे एक ब्लॉक हैं तत्व।
स्पैन एक इनलाइन . हैं तत्व। वे केवल उतनी ही जगह लेते हैं जितनी जरूरत होती है और मुख्य रूप से किसी चीज पर जोर देने के लिए उपयोग की जाती हैं।
यहाँ प्रत्येक का एक दृश्य प्रतिनिधित्व है:
<शीर्षक>डिव बनाम स्पैन <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; फ़ॉन्ट-आकार:1.4rem; फ़ॉन्ट-परिवार:मोनोस्पेस; } .div- शैली {पृष्ठभूमि:बैंगनी; रंग:ब्लैंचडालमंड; ऊंचाई:ऑटो; पैडिंग:20 पीएक्स; मार्जिन:10px; } .span-style {पृष्ठभूमि:नारंगी; रंग काला; } .highlight {फ़ॉन्ट-शैली:इटैलिक; प्रदर्शन:इनलाइन-ब्लॉक; ऊंचाई:100 पीएक्स; चौड़ाई:75%; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; पृष्ठभूमि:मध्यम स्लेटनीला; रंग:हाथीदांत; } h3 { टेक्स्ट-डेकोरेशन:अंडरलाइन; } Divs
मैं एक div हूं
I जितना हो सके उतना स्थान लें
स्पैन
मैं एक स्पैन हूं I केवल उतना ही स्थान लें जितना मुझे चाहिए। मैं टेक्स्ट पर बहुत जोर देता हूं। स्पैन डिव के अंदर जा सकते हैं...
... अन्य टेक्स्ट की तुलना में अलग स्टाइल है...
...और जब तक आप display:inline-block
हम सीएसएस में रंग और पृष्ठभूमि का रंग बदलने के लिए स्पैन और डिव को एक साथ समूहित करने के लिए कक्षाओं का उपयोग करते हैं। याद रखें कि स्पैन पर ऊंचाई या चौड़ाई तब तक नहीं बदली जा सकती जब तक आप display: inline-block . नहीं जोड़ते हैं संपत्ति।
जब वे एक साथ काम करते हैं तो यह कैसा दिखता है:
<शीर्षक>डिव/स्पैन <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; फ़ॉन्ट-आकार:1.4rem; फ़ॉन्ट-परिवार:मोनोस्पेस; } .div- शैली {पृष्ठभूमि:बैंगनी; रंग:ब्लैंचडालमंड; ऊंचाई:ऑटो; पैडिंग:20 पीएक्स; मार्जिन:10px; } .span-style {पृष्ठभूमि:नारंगी; रंग:हाथीदांत; } h3 {पाठ-सजावट:रेखांकित;; } .एनएवी {पृष्ठभूमि:गोल्डनरोड; पैडिंग:20 पीएक्स; } .शीर्षक {फ़ॉन्ट-वेट:बोल्ड; फ़ॉन्ट-आकार:1.6rem; } .फ्लेक्स-कंटेनर {डिस्प्ले:फ्लेक्स; } .कंटेनर {डिस्प्ले:फ्लेक्स; फ्लेक्स-दिशा:कॉलम;" }। साइडबार-मुख्य-कंटेनर {पृष्ठभूमि:भारतीय; पैडिंग:20 पीएक्स; }। साइडबार {पृष्ठभूमि:सफेद; रंग:काला; चौड़ाई:40%; पैडिंग:20 पीएक्स; }। मुख्य-कंटेनर { चौड़ाई:60%; पैडिंग:20px; पृष्ठभूमि:हरा; फ़ॉन्ट-आकार:1.2rem; } .मुख्य-सामग्री {चौड़ाई:100%; मार्जिन:10px 0px; प्रदर्शन:फ्लेक्स; } .चाइल्ड-कंटेनर {चौड़ाई:50%; फ़ॉन्ट-आकार:1.0rem; } .गुलाबी {पृष्ठभूमि:गुलाबी; रंग:काला; } .लाल {पृष्ठभूमि:लाल; } p{ फ़ॉन्ट-आकार:1.2rem; } .पाद लेख {पाठ-संरेखण:केंद्र; पृष्ठभूमि:नीले फूलों वाला जंगली पेड़ जैसा नीला रंग; } .पाद लेख अवधि {फ़ॉन्ट-आकार:.7rem; } डिव और स्पैन का एक साथ उपयोग करना:
Div 1:मुख्य समग्र कंटेनर
आपकी वेबसाइट के बुनियादी निर्माण खंड बनाने के लिए स्पैन और डिव अन्य HTML तत्वों के साथ मिलकर काम करते हैं। जोर देने के लिए स्पैन को आपके डिव से अलग स्टाइल किया जा सकता है।