HTML এলিমেন্টে টেক্সট ইন্ডেন্ট করতে চান? CSS ব্যবহার করে প্যারাগ্রাফের প্রথম লাইন ইন্ডেন্ট করতে পারেন!
এটি কীভাবে করবেন সেটি নিচে দেখানো হলো:
text-indent ব্যবহার করে প্যারাগ্রাফের প্রথম লাইন ইন্ডেন্ট করুন
ধরা যাক, আপনার একটি প্যারাগ্রাফে নিচের মতো টেক্সট আছে:
<p class="indent"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat! </p>আপনি CSS প্রপার্টি text-indent ব্যবহার করে প্রথম লাইনকে একটি নির্দিষ্ট দৈর্ঘ্যে ইন্ডেন্ট করতে পারেন:
p.indent { text-indent: 30px; }এটি নিচের মতো দেখাবে:
অন্য CSS দৈর্ঘ্য প্রপার্টির মতো, আপনি এখানে যেকোনো ইউনিট ব্যবহার করতে পারেন। পিক্সেল (px), em, rem, এমনকি পার্সেন্টেজ (%) ইউনিটও কাজ করবে।
পার্সেন্টেজের মতো একটি রিলেটিভ ইউনিট ব্যবহার করলে ওয়েবপেজের প্রস্থের উপর ভিত্তি করে ইন্ডেন্টের পরিমাণ পরিবর্তন হবে। ওয়েবপেজ যত চওড়া, ইন্ডেন্ট তত বড় হবে।
আপনি 네가тив text-indent মানও ব্যবহার করতে পারেন যদি চান, প্রথম লাইনকে বামে বেরিয়ে আনতে।
p.indent { text-indent: -30px; }নেগেটিভ ইন্ডেন্ট প্যারাগ্রাফে কেমন দেখাবে:
যদি আপনি পুরো প্যারাগ্রাফকে ডানে শিফ্ট করতে চান তবে margin-left ব্যবহার করুন
যদি আপনি পুরো প্যারাগ্রাফকে শিফ্ট করতে চান, শুধু প্রথম লাইন নয়, তবে আপনি margin-left প্রপার্টি ব্যবহার করতে পারেন।
p.shifted { margin-left: 30px; }এটি কেমন দেখাবে। প্রথম প্যারাগ্রাফ শিফ্ট করা নেই, এবং দ্বিতীয় প্যারাগ্রাফটি শিফ্ট করা আছে:
