Spacing Utilities (Margin, Padding)

Bulma CSS ফ্রেমওয়ার্কে spacing utilities ব্যবহার করে আপনি সহজেই বিভিন্ন উপাদানের মধ্যে margin (বাহ্যিক ফাঁকা জায়গা) এবং padding (অভ্যন্তরীণ ফাঁকা জায়গা) কাস্টমাইজ করতে পারেন। এটি আপনাকে দ্রুত এবং কার্যকরভাবে আপনার ডিজাইনে ব্যবধান নির্ধারণ করতে সাহায্য করে।

Bulma তে spacing utilities বিশেষভাবে m, p, mx, my, px, এবং py ক্লাসগুলোর মাধ্যমে ব্যবহৃত হয়, যা margin এবং padding এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারে। এই ক্লাসগুলো বিভিন্ন ফাঁকা জায়গা (spacing) নির্ধারণে খুবই সহায়ক।

১. Margin Utilities

Margin হলো দুটি উপাদানের মধ্যে বাহ্যিক ফাঁকা জায়গা। Bulma তে m ক্লাস ব্যবহার করে আপনি সহজেই margin প্রয়োগ করতে পারেন। আপনি বিভিন্ন দিকে (top, right, bottom, left) margin অ্যাপ্লাই করতে পারেন।

Margin ব্যবহারের উদাহরণ:

• m-{size}: পুরো উপাদানের চারপাশে margin।
• mt-{size}: উপাদানের উপরে margin।
• mr-{size}: উপাদানের ডানদিকে margin।
• mb-{size}: উপাদানের নিচে margin।
• ml-{size}: উপাদানের বামে margin।
• mx-{size}: উপাদানের বাম এবং ডানদিকে margin।
• my-{size}: উপাদানের উপরে এবং নিচে margin।

উদাহরণ: Margin প্রয়োগ করা

<div class="box m-4">
  <p>This box has a margin of 4 units on all sides.</p>
</div>

<div class="box mt-5 mb-3">
  <p>This box has margin of 5 units on top and 3 units on bottom.</p>
</div>

এখানে:

• m-4: এই ক্লাসটি উপাদানের চারপাশে ৪ ইউনিট margin যোগ করবে।
• mt-5: উপাদানের উপরে ৫ ইউনিট margin যোগ করবে।
• mb-3: উপাদানের নিচে ৩ ইউনিট margin যোগ করবে।

Bulma এ margin এর সাইজ সাধারণত 0 থেকে 6 পর্যন্ত হয়ে থাকে, এবং এগুলো বিভিন্ন রকমের spacing প্রদান করে।

২. Padding Utilities

Padding হলো উপাদানের অভ্যন্তরীণ ফাঁকা জায়গা, যা উপাদানের কনটেন্টের চারপাশে অবস্থান করে। Bulma তে p ক্লাস ব্যবহার করে আপনি padding নিয়ন্ত্রণ করতে পারেন। এর মধ্যে বিভিন্ন দিকের padding কাস্টমাইজ করা সম্ভব।

Padding ব্যবহারের উদাহরণ:

• p-{size}: পুরো উপাদানের চারপাশে padding।
• pt-{size}: উপাদানের উপরে padding।
• pr-{size}: উপাদানের ডানদিকে padding।
• pb-{size}: উপাদানের নিচে padding।
• pl-{size}: উপাদানের বামে padding।
• px-{size}: উপাদানের বাম এবং ডানদিকে padding।
• py-{size}: উপাদানের উপরে এবং নিচে padding।

উদাহরণ: Padding প্রয়োগ করা

<div class="box p-4">
  <p>This box has padding of 4 units on all sides.</p>
</div>

<div class="box pt-5 pb-3">
  <p>This box has padding of 5 units on top and 3 units on bottom.</p>
</div>

এখানে:

• p-4: এই ক্লাসটি উপাদানের চারপাশে ৪ ইউনিট padding যোগ করবে।
• pt-5: উপাদানের উপরে ৫ ইউনিট padding যোগ করবে।
• pb-3: উপাদানের নিচে ৩ ইউনিট padding যোগ করবে।

৩. Negative Margin

Bulma তে আপনি negative margin ব্যবহারের মাধ্যমে উপাদানগুলিকে একে অপরের মধ্যে আরও ঘনিষ্ঠভাবে রাখতে পারেন। এর মাধ্যমে আপনি উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন যাতে এগুলি একে অপরের মধ্যে কিছুটা overlap করতে পারে।

Negative Margin ব্যবহারের উদাহরণ:

<div class="box m-4">
  <p>This box has a margin of 4 units.</p>
</div>

<div class="box m-n4">
  <p>This box has a negative margin of 4 units, bringing it closer to the previous box.</p>
</div>

এখানে, m-n4 ক্লাসটি negative margin অ্যাপ্লাই করবে, যার ফলে এই উপাদানটি পূর্ববর্তী উপাদানের কাছাকাছি চলে আসবে।

৪. Auto Margin

Bulma তে m-auto ক্লাস ব্যবহার করে আপনি উপাদানকে স্বয়ংক্রিয়ভাবে (auto) সেন্টার করতে পারেন। এটি সাধারণত display: block এর সাথে ব্যবহৃত হয় এবং উপাদানটিকে পিতামাতার উপাদান (parent element) এর মাঝখানে স্থাপন করে।

উদাহরণ: Auto Margin

<div class="box m-auto" style="width: 200px;">
  <p>This box is horizontally centered using margin-auto.</p>
</div>

এখানে, m-auto ক্লাসটি উপাদানটিকে পিতামাতার উপাদানের মধ্যে সেন্টার করে।

৫. Spacing Utilities: Responsive Spacing

Bulma তে responsive spacing utilities এর মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজে উপাদানের margin এবং padding কাস্টমাইজ করতে পারেন। এর জন্য is-mobile, is-tablet, is-desktop ইত্যাদি ক্লাস ব্যবহার করা হয়।

উদাহরণ: Responsive Margin এবং Padding

<div class="box m-4 m-mobile-2 m-tablet-3 m-desktop-5">
  <p>This box has different margin values on different screen sizes.</p>
</div>

এখানে:

• m-4: ডিফল্ট margin।
• m-mobile-2: মোবাইল স্ক্রীনে ২ ইউনিট margin।
• m-tablet-3: ট্যাবলেট স্ক্রীনে ৩ ইউনিট margin।
• m-desktop-5: ডেস্কটপ স্ক্রীনে ৫ ইউনিট margin।

এই কৌশলটি আপনার ডিজাইনকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করতে সাহায্য করে।

সারাংশ

Bulma তে spacing utilities ব্যবহারের মাধ্যমে আপনি সহজেই margin এবং padding নিয়ন্ত্রণ করতে পারেন। m এবং p ক্লাসগুলোর মাধ্যমে margin এবং padding এর বিভিন্ন দিক কাস্টমাইজ করা সম্ভব, যেমন top, bottom, left, এবং right। এছাড়া, negative margin এবং auto margin ব্যবহার করে আপনি উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন। রেসপনসিভ ডিজাইনের জন্য responsive spacing ক্লাসও প্রদান করা হয়েছে, যা আপনার ওয়েব পেজের বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত spacing তৈরি করতে সাহায্য করবে।