Tailwind CSS প্রদান করে ' মার্জিন ” ইউটিলিটি ক্লাস যা ব্যবহারকারীদের উপাদানের চারপাশে ব্যবধান নিয়ন্ত্রণ করতে সক্ষম করে। দ্য অনুভূমিক মার্জিন একটি উপাদানের বাম এবং ডান দিকে স্থান যোগ করে, যেখানে a উল্লম্ব মার্জিন একটি উপাদানের উপরে এবং নীচে স্থান যোগ করে। Tailwind পছন্দসই উপাদানগুলিতে অনুভূমিক বা উল্লম্ব মার্জিন যোগ করতে বিভিন্ন ইউটিলিটি ক্লাস অফার করে।
এই নিবন্ধটি উদাহরণ দেবে:
কিভাবে Tailwind একটি অনুভূমিক মার্জিন যোগ করতে?
Tailwind-এ একটি উপাদানে একটি অনুভূমিক মার্জিন যোগ করতে, “ mx-
বাক্য গঠন
< উপাদান ক্লাস = 'mx-
এখানে, 'mx' 'x-অক্ষ' বা 'অনুভূমিক মার্জিন' উপস্থাপন করে। নিশ্চিত করুন যে “
উদাহরণ: একটি HTML উপাদানে একটি অনুভূমিক মার্জিন প্রয়োগ করা
এই উদাহরণে, আমরা ব্যবহার করব ' mx-10 'এর সাথে ইউটিলিটি ক্লাস' Tailwind এ একটি উপাদানে একটি উল্লম্ব মার্জিন যোগ করতে, ' my- বাক্য গঠন উদাহরণ: একটি HTML উপাদানে একটি উল্লম্ব মার্জিন প্রয়োগ করা এই উদাহরণে, আমরা ব্যবহার করব ' আমার-10 'এর সাথে ইউটিলিটি ক্লাস' Tailwind-এ অনুভূমিক এবং উল্লম্ব মার্জিন যোগ করতে, “ mx-
< শরীর >
< div ক্লাস = 'এইচ-স্ক্রিন এমএক্স-10 বিজি-বেগুনি-500' >
< পি ক্লাস = 'টেক্সট-5xl টেক্সট-সেন্টার' > মার্জিন ভিতরে Tailwind CSS পি >
div >
শরীর >
আউটপুট
উপরের আউটপুট ধারকটির বাম এবং ডান দিকে মার্জিন দেখায়। এটি নির্দেশ করে যে অনুভূমিক মার্জিনটি কন্টেইনার উপাদানে সফলভাবে প্রয়োগ করা হয়েছে। কিভাবে Tailwind একটি উল্লম্ব মার্জিন যোগ করতে?
এখানে, 'my' 'y-অক্ষ' বা 'উল্লম্ব মার্জিন' উপস্থাপন করে। নিশ্চিত করুন যে '
< div ক্লাস = 'h-96 my-10 bg-বেগুনি-500' >
< পি ক্লাস = 'টেক্সট-5xl টেক্সট-সেন্টার' > মার্জিন ভিতরে Tailwind CSS পি >
div >
শরীর >
আউটপুট
উপরের আউটপুট কন্টেইনারের উপরের এবং নীচের দিকে মার্জিন দেখায়। এটি নির্দেশ করে যে উল্লম্ব মার্জিন কার্যকরভাবে ধারক উপাদানে প্রয়োগ করা হয়েছে। উপসংহার