কিভাবে Tailwind এ অনুভূমিক এবং উল্লম্ব মার্জিন যোগ করবেন?

Kibhabe Tailwind E Anubhumika Ebam Ullamba Marjina Yoga Karabena



Tailwind CSS প্রদান করে ' মার্জিন ” ইউটিলিটি ক্লাস যা ব্যবহারকারীদের উপাদানের চারপাশে ব্যবধান নিয়ন্ত্রণ করতে সক্ষম করে। দ্য অনুভূমিক মার্জিন একটি উপাদানের বাম এবং ডান দিকে স্থান যোগ করে, যেখানে a উল্লম্ব মার্জিন একটি উপাদানের উপরে এবং নীচে স্থান যোগ করে। Tailwind পছন্দসই উপাদানগুলিতে অনুভূমিক বা উল্লম্ব মার্জিন যোগ করতে বিভিন্ন ইউটিলিটি ক্লাস অফার করে।

এই নিবন্ধটি উদাহরণ দেবে:







কিভাবে Tailwind একটি অনুভূমিক মার্জিন যোগ করতে?

Tailwind-এ একটি উপাদানে একটি অনুভূমিক মার্জিন যোগ করতে, “ mx- ” এইচটিএমএল প্রোগ্রামে কাঙ্খিত উপাদানের সাথে ক্লাস ব্যবহার করা হয়। ব্যবহারকারীরা মার্জিনের আকারের জন্য বিভিন্ন মান নির্দিষ্ট করতে পারেন। এই শ্রেণীটি x-অক্ষ বরাবর একটি মার্জিন যোগ করে (ডান এবং বাম দিক)।



বাক্য গঠন



< উপাদান ক্লাস = 'mx- ...' > ... উপাদান >


এখানে, 'mx' 'x-অক্ষ' বা 'অনুভূমিক মার্জিন' উপস্থাপন করে। নিশ্চিত করুন যে “” যেকোন বৈধ মান দিয়ে প্রতিস্থাপন করুন, যেমন “5”, “14” ইত্যাদি।





উদাহরণ: একটি HTML উপাদানে একটি অনুভূমিক মার্জিন প্রয়োগ করা

এই উদাহরণে, আমরা ব্যবহার করব ' mx-10 'এর সাথে ইউটিলিটি ক্লাস'

” উপাদান এটিতে একটি অনুভূমিক মার্জিন যোগ করতে:



< শরীর >

< div ক্লাস = 'এইচ-স্ক্রিন এমএক্স-10 বিজি-বেগুনি-500' >

< পি ক্লাস = 'টেক্সট-5xl টেক্সট-সেন্টার' > মার্জিন ভিতরে Tailwind CSS পি >

div >

শরীর >


আউটপুট


উপরের আউটপুট ধারকটির বাম এবং ডান দিকে মার্জিন দেখায়। এটি নির্দেশ করে যে অনুভূমিক মার্জিনটি কন্টেইনার উপাদানে সফলভাবে প্রয়োগ করা হয়েছে।

কিভাবে Tailwind একটি উল্লম্ব মার্জিন যোগ করতে?

Tailwind এ একটি উপাদানে একটি উল্লম্ব মার্জিন যোগ করতে, ' my- HTML প্রোগ্রামে নির্দিষ্ট উপাদান সহ ইউটিলিটি ক্লাস। এই শ্রেণীটি y-অক্ষ বরাবর একটি মার্জিন যোগ করে (উপর এবং নীচের দিকগুলি)।

বাক্য গঠন

< উপাদান ক্লাস = 'আমার- <মান> ...' > ... উপাদান >


এখানে, 'my' 'y-অক্ষ' বা 'উল্লম্ব মার্জিন' উপস্থাপন করে। নিশ্চিত করুন যে ''কে যেকোনো বৈধ মান দিয়ে প্রতিস্থাপন করুন, যেমন '6', '12' ইত্যাদি।

উদাহরণ: একটি HTML উপাদানে একটি উল্লম্ব মার্জিন প্রয়োগ করা

এই উদাহরণে, আমরা ব্যবহার করব ' আমার-10 'এর সাথে ইউটিলিটি ক্লাস'

” উপাদান এটিতে একটি উল্লম্ব মার্জিন যোগ করতে:

< শরীর >

< div ক্লাস = 'h-96 my-10 bg-বেগুনি-500' >

< পি ক্লাস = 'টেক্সট-5xl টেক্সট-সেন্টার' > মার্জিন ভিতরে Tailwind CSS পি >

div >

শরীর >


আউটপুট


উপরের আউটপুট কন্টেইনারের উপরের এবং নীচের দিকে মার্জিন দেখায়। এটি নির্দেশ করে যে উল্লম্ব মার্জিন কার্যকরভাবে ধারক উপাদানে প্রয়োগ করা হয়েছে।

উপসংহার

Tailwind-এ অনুভূমিক এবং উল্লম্ব মার্জিন যোগ করতে, “ mx- ' এবং ' my- ” ইউটিলিটি ক্লাস যথাক্রমে HTML প্রোগ্রামে পছন্দসই উপাদানের সাথে ব্যবহার করা হয়। ব্যবহারকারীরা একটি উপাদানের বাম এবং ডান বা উপরে এবং নীচে মার্জিন প্রয়োগ করতে বিভিন্ন মান নির্দিষ্ট করতে পারেন। এই লেখাটি টেলউইন্ডে অনুভূমিক এবং উল্লম্ব মার্জিন প্রয়োগ করার পদ্ধতির উদাহরণ দিয়েছে।