मैं उपयोग करता हूं <span> अपने मॉड्यूल शीर्षक में टैग का हूं, जैसे
<span>Categories</span>.
मैं सीएसएस में स्पैन की पृष्ठभूमि का रंग / छवि, चौड़ाई और ऊंचाई निर्दिष्ट करता हूं।
लेकिन स्पैन की चौड़ाई इसकी सामग्री / पाठ पर निर्भर करती है।
इसलिए, अगर मैं करता हूँ <span></span> सीएसएस में सिर्फ एक पृष्ठभूमि छवि / रंग के साथ, कुछ भी नहीं दिखाई देता है।
बेशक, मैं कुछ प्रकट करना चाहता हूं।
मैं इसे कैसे हल करूं?
जवाबों:
आप स्पष्ट रूप से प्रदर्शन संपत्ति को "ब्लॉक" करने के लिए सेट कर सकते हैं, इसलिए यह ब्लॉक स्तर के तत्व की तरह व्यवहार करता है, लेकिन उस स्थिति में आपको शायद इसके बजाय एक div का उपयोग करना चाहिए।
<span style="display:block; background-color:red; width:100px;"></span>
inline-blockबजायblock
डिफ़ॉल्ट इनलाइन शैली, जो आप की चौड़ाई निर्दिष्ट नहीं कर सकते हैं।
display: inline-block;
IE इसे समर्थन नहीं करता है, सिवाय एक अच्छा तरीका होगा
हालाँकि, आप कई ब्राउज़र समाधान हैक कर सकते हैं
आप प्रदर्शन इनलाइन के साथ एक तत्व की चौड़ाई निर्दिष्ट नहीं कर सकते। आप इसमें एक गैर-ब्रेकिंग स्पेस () की तरह कुछ डाल सकते हैं और फिर इसे कुछ और चौड़ाई देने के लिए पैडिंग सेट कर सकते हैं लेकिन आप इसे सीधे नियंत्रित नहीं कर सकते।
आप डिस्प्ले इनलाइन-ब्लॉक का उपयोग कर सकते हैं लेकिन यह व्यापक रूप से समर्थित नहीं है।
एक असली हैक एक छवि को अंदर रखना होगा और फिर उस की चौड़ाई सेट करना होगा। पारदर्शी 1 पिक्सेल GIF जैसा कुछ। हालांकि अनुशंसित दृष्टिकोण नहीं है।
मैं paddingविशेषता का उपयोग करूंगा । यह आपको तत्वों के किसी भी हिस्से में पिक्सेल की एक निर्धारित संख्या को जोड़ने की अनुमति देगा, जिसमें तत्व के बिना इसके स्पैन गुण खो सकते हैं:
यह विधि केवल पैडिंग में जोड़ देगी, इसलिए यदि आप सामग्री की लंबाई (उदाहरण के लिए, श्रेणियाँ से टैग तक) बदलते हैं, तो सामग्री का आकार बदल जाएगा और तत्व का समग्र आकार भी बदल जाएगा। लेकिन अगर आप वास्तव में एक कठोर आकार निर्धारित करना चाहते हैं, तो आपको ऊपर बताए अनुसार और एक div का उपयोग करना चाहिए।
बॉक्स मॉडल, सामग्री, गद्दी, मार्जिन आदि के बारे में अधिक जानकारी के लिए बॉक्स मॉडल देखें ।
अन्य उत्तरों की तरह, इस के साथ अपनी स्पैन विशेषताएँ शुरू करें:
display:inline-block;
अब आप चौड़ाई से अधिक पैडिंग का उपयोग कर सकते हैं :
padding-left:6%;
padding-right:6%;
जब आप गद्दी का उपयोग करते हैं, तो आपका रंग दोनों तरफ (दाएं और बाएं) तक फैलता है , न कि केवल दाएं (जैसे कि विधवा में)।
यदि आपने शोलुद की ऊंचाई और चौड़ाई तय कर ली है, तो यह बताएं कि यदि पाठ के अंदर का भाग उसके क्षेत्र से अधिक हो जाए तो कैसे करें। इसलिए सीएसएस में जोड़ें
अतिप्रवाह: ऑटो;