সিএসএস: উপাদানগুলির সামগ্রীর আগে সাদা স্থান কীভাবে যুক্ত করবেন?

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; }।

— সিএইচও

@ কারন মার্জিন স্থিতিশীল, স্থানের প্রস্থ হরফ আকারের সাথে তুলনামূলকভাবে

— পছন্দ করেন না

Answer 1

আপনি একটি নন ব্রেকিং স্পেসের ইউনিকোড ব্যবহার করতে পারেন:

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

জেএসফিডাল ডেমো দেখুন

[@ জেসন স্পারস্কে স্টাইল উন্নত করেছে]

Comments

আমি একটি সামান্য সম্পাদনা করেছি যাতে আপনি এটির প্রভাবটি দেখতে পান: jsfiddle.net/uMFHH/3 (অন্যথায় এটি কেবল মার্জিনের মতো দেখায়, যা একটি ভাল প্রশ্ন নিয়ে আসে, কেন কেবল মার্জিন যোগ করবেন না?)

— জেসন স্পারসেক

কারণ আমাকে সীমানা-বাম এবং মার্জিন-বামে রঙ করা দরকার :)

— হুগলপজ

শেষে কেন জায়গা "\00a0 "? এটি কি প্রয়োজনীয় বা আমরা কেবল করতে পারি "\00a0"?

— jbyrd

@ জাইবার্ড: প্রয়োজনীয় নয় ( jsfiddle.net/nhyw6e9q দেখুন )। আমি এটি ছেড়ে দিয়েছি যাতে দেখানো যায় যে সাধারণ জায়গার জন্য হিসাব নেই।

— হুগলপজ

Answer 2

স্পেস .োকানোর সাথে চারপাশে ঘুরান না। একটির জন্য, IE এর পুরানো সংস্করণগুলি আপনি কী বলছেন তা জানতে পারবেন না। তা ছাড়া, যদিও সাধারণভাবে পরিষ্কার উপায় রয়েছে।

বর্ণহীন ইন্ডেন্টগুলির জন্য, text-indentসম্পত্তিটি ব্যবহার করুন ।

p { text-indent: 1em; }

জেএসফিডাল ডেমো

সম্পাদনা:

আপনি যদি জায়গাটি রঙিন করতে চান তবে আপনি প্রথম অক্ষরে একটি ঘন বাম সীমানা যুক্ত করার বিষয়টি বিবেচনা করতে পারেন। (আমি "পরিবর্তে" প্রায়-তবে-না-বলেছি, কারণ ইনডেন্টটি একটি সমস্যা হতে পারে যদি আপনি উভয়ই ব্যবহার করেন তবে তবে ইন্ডেন্টের জন্য কেবল সীমান্তের উপর নির্ভর করা আমার কাছে নোংরা বোধ করে feels) আপনি কতটা দূরে নির্দিষ্ট করতে পারবেন , এবং কত প্রশস্ত, রঙটি প্রথম বর্ণের বাম মার্জিন / প্যাডিং / সীমানা প্রস্থ ব্যবহার করছে।

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

ডেমো

Comments

আপনি যদি আই <8 সমর্থন করে আটকে থাকেন তবে এই পদ্ধতিটি কাজ করবে যখন এর আগে / পরে সিউডো উপাদানগুলি কাজ করবে না।

— cimmanon

@ সিমমানন: হ্যাঁ এমডিএন অনুসারে, এটি আইই 3 তেও কাজ করে (যদিও আমি বুঝতে পারি নি যে তাদের তখন সিএসএস ছিল : পি)।

— সিএইচও

আপনি যেমন একটি ইন্ডেন্টেশন রঙ করতে পারবেন না { text-indent: 1em; }। কিন্তু আমরা যেমন একটি স্থান রঙ করতে পারেন :before {content: "\00a0 "; background: #000; }। ফিডল দেখুন

— হুগলপজ

@ হুগলপজ: একটি পাঠ্য ইনডেন্ট? নাঃ। এএফাইক, এটি আলাদাভাবে রঙ করতে পারে না। তবে কোন সীমানা? অবশ্যই। :)

— সিএইচও

ওহ, আমরা বেশ কয়েকটি সামগ্রী যুক্ত করতে পারি না, ফিডল দেখুন । খুব খারাপ ...

— হুগলপজ

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 */
}