सीएसएस: तत्व की सामग्री से पहले सफेद स्थान कैसे जोड़ें?

Question

निम्नलिखित में से कोई भी कोड काम नहीं करता है:

p:before { content: " "; }
p:before { content: " "; }

मैं तत्व की सामग्री से पहले सफेद स्थान कैसे जोड़ूं?

नोट: मुझे बॉर्डर-लेफ्ट और मार्जिन-लेफ्ट को सिमेंटिक यूज़ के लिए कलर करना होगा और स्पेस को बेरंग मार्जिन के रूप में इस्तेमाल करना होगा। :)

Comments

सिर्फ साधारण मार्जिन क्यों न जोड़ें।

— कैम

हो सकता है क्योंकि मार्जिन / पैडिंग पूरे ब्लॉक को प्रभावित करता है। पाठ-इंडेंट एक बेहतर विकल्प होगा

— अच्छा गधा

मुझे बॉर्डर-लेफ्ट को कलर करने की जरूरत है और सिमेंटिक यूज के लिए मार्जिन-लेफ्ट :) मैं कई ऐड कर सकता हूं element:before { content:"[a kind of space]"; background: mycolor;}। सभी तरह से मैं रिक्त स्थान, थोड़े मज़ा जोड़ने का एक तरीका जानना चाहता था!

— हुगोलपज़

@ हगोलपज़: आप मूल रूप से एक ही काम कर सकते हैं p:first-letter { border-left: 1ex solid mycolor; }।

— cHao

@carn मार्जिन स्थिर हैं, अंतरिक्ष की चौड़ाई फ़ॉन्ट आकार के सापेक्ष है

— प्यार नहीं किया

Answer 1

आप एक नॉन ब्रेकिंग स्पेस के यूनिकोड का उपयोग कर सकते हैं:

p:before { content: "\00a0 "; }

JSfiddle डेमो देखें

[शैली @ जैसन स्पर्सके द्वारा सुधार किया गया]

Comments

मैंने एक छोटा सा संपादन किया ताकि आप इसे देख सकें: jsfiddle.net/uMFHH/3 (अन्यथा यह सिर्फ एक मार्जिन की तरह दिखता है, जो एक अच्छा सवाल लाता है, तो बस एक मार्जिन क्यों नहीं जोड़ा जाता?)

— जेसन स्पर्सके

क्योंकि मुझे बॉर्डर-लेफ्ट और मार्जिन-लेफ्ट को कलर करने की आवश्यकता है :)

— हुगोलपज़

के अंत में स्थान क्यों "\00a0 "? क्या यह आवश्यक है या हम बस कर सकते हैं "\00a0"?

— jbyrd

@jbyrd: neccessary नहीं ( jsfiddle.net/nhyw6e9q देखें )। मैंने इसे यह दिखाने के लिए छोड़ दिया कि सामान्य स्थान का कोई हिसाब नहीं है।

— हुगोलपज़

Answer 2

रिक्त स्थान डालने के साथ गोज़ न करें। एक के लिए, IE के पुराने संस्करणों को नहीं पता होगा कि आप किस बारे में बात कर रहे हैं। इसके अलावा, हालांकि, सामान्य रूप से क्लीनर तरीके हैं।

बेरंग इंडेंट के लिए, text-indentसंपत्ति का उपयोग करें ।

p { text-indent: 1em; }

JSFiddle डेमो

संपादित करें:

यदि आप चाहते हैं कि अंतरिक्ष रंगीन हो, तो आप पहले अक्षर में एक मोटी बाईं सीमा जोड़ने पर विचार कर सकते हैं। (मैं लगभग-लेकिन-नहीं-काफी "के बजाय" कहता हूं, क्योंकि इंडेंट एक मुद्दा हो सकता है यदि आप दोनों का उपयोग करते हैं। लेकिन यह मुझे गंदे महसूस करता है कि केवल सीमा पर इंडेंट पर भरोसा करना है।) आप निर्दिष्ट कर सकते हैं कि कितनी दूर है। , और कितना चौड़ा है, रंग पहले अक्षर के बाएं मार्जिन / पैडिंग / बॉर्डर चौड़ाई का उपयोग कर रहा है।

p:first-letter { border-left: 1em solid red; }

डेमो

Comments

यदि आप IE <8 का समर्थन कर रहे हैं, तो यह विधि काम करेगी जबकि छद्म तत्वों के पहले / बाद में नहीं होगी।

— cimmanon

@ कैमिमन: हां। एमडीएन के अनुसार, यह IE 3 में भी काम करता है (हालांकि मुझे एहसास भी नहीं था कि उनके पास सीएसएस वापस है: पी)।

— cHao

आप किसी इंडेंटेशन को कलर नहीं कर सकते { text-indent: 1em; }। लेकिन हम ऐसे स्पेस को कलर कर सकते हैं :before {content: "\00a0 "; background: #000; }। फिडल देखें

— हगोलपज़

@ हगोलपज़: एक पाठ-इंडेंट? नहीं। अलग से रंग नहीं कर सकता, AFAIK। लेकिन एक सीमा? ज़रूर। :)

— cHao

ओह, हम कई सामग्री नहीं जोड़ सकते, Fiddle देखें । बहुत बुरा ...

— हुगोलपज़

Answer 3

जब से आप तत्वों के बीच स्थान जोड़ने की तलाश कर रहे हैं, तो आपको मार्जिन-लेफ्ट या पेडिंग-लेफ्ट के रूप में कुछ सरल की आवश्यकता हो सकती है। यहाँ http://jsfiddle.net/BGHqn/3/ दोनों के उदाहरण हैं

यह पैरा तत्व के बाईं ओर 10 पिक्सेल जोड़ेगा

p {
    margin-left: 10px;
 }

या यदि आप अपने पैराग्राफ तत्व के भीतर कुछ पैडिंग चाहते हैं

p {
    padding-left: 10px;
}

Answer 4

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}