🔹 Margin چیه؟

ویژگی margin فضای خالی خارج از عنصر (بین عنصر و عناصر یا مرزهای اطرافش) رو مشخص می‌کنه.
مثلاً باعث میشه دکمه‌ها از هم فاصله بگیرن.

🔹 کلاس‌های Margin در Tailwind

الگوی کلاس‌ها مشابه پدینگ هست:

• m-{size} → مارجین برای همه جهات.

• mx-{size} → مارجین افقی (چپ و راست).

• my-{size} → مارجین عمودی (بالا و پایین).

• mt-{size} → فقط بالا (top).

• mr-{size} → فقط راست (right).

• mb-{size} → فقط پایین (bottom).

• ml-{size} → فقط چپ (left).

🔹 مقادیر Margin (size)

مقدارها همون scale پیش‌فرض Tailwind هستن:

• m-0 → 0px

• m-1 → 0.25rem (4px)

• m-2 → 0.5rem (8px)

• m-4 → 1rem (16px)

• m-8 → 2rem (32px)
  و ...

🔹 مقادیر خاص

• m-auto → عنصر به صورت خودکار وسط‌چین میشه (معمولاً افقی).

• مقدارهای منفی هم پشتیبانی میشن:

  • -m-2 → -0.5rem

  • -mt-4 → -1rem (مارجین منفی از بالا).

🔹 مثال (مارجین همه‌جانبه)

<div class="m-4 bg-blue-400 text-white p-2">
  این باکس margin همه‌جانبه داره
</div>

🔹 مثال (مارجین افقی و عمودی)

<div class="my-4 mx-8 bg-green-400 text-white p-2">
  این باکس margin افقی و عمودی داره
</div>

🔹 مثال (مارجین منفی)

<div class="bg-gray-200 p-4">
  <div class="-mt-4 bg-red-400 text-white p-2">
    این باکس با margin منفی به بالا رفته
  </div>
</div>

🔹 مثال (استفاده از auto برای وسط‌چین)

<div class="w-64 bg-yellow-400 text-center p-2 mx-auto">
  این باکس با margin:auto افقی وسط‌چین شده
</div>

🔹 نکته مهم

• margin برعکس padding همیشه بیرون عنصر اعمال میشه.

• استفاده از m-auto خیلی رایجه برای وسط‌چین کردن عناصر با عرض ثابت.

• ترکیب margin و padding ابزار اصلی فاصله‌گذاری در Tailwind هست.