🔹 Space Between چیه؟

ویژگی space-between توی Tailwind برای کنترل فاصله‌ی بین آیتم‌های فرزند داخل Flex یا Grid استفاده میشه.
📌 تفاوتش با margin اینه که فاصله‌ها فقط بین آیتم‌ها اعمال میشه، نه بیرون container.

🔹 کلاس‌های Space Between در Tailwind

• space-x-{size} → فاصله افقی بین آیتم‌ها (چپ و راست).

• space-y-{size} → فاصله عمودی بین آیتم‌ها (بالا و پایین).

و برای حذف فاصله میشه از space-x-0 یا space-y-0 استفاده کرد.

🔹 مقادیر (size)

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

• space-x-2 → 0.5rem (8px)

• space-x-4 → 1rem (16px)

• space-y-6 → 1.5rem (24px)
  و ...

🔹 مثال (افقی – space-x)

<div class="flex space-x-4 bg-gray-200 p-4">
  <div class="bg-blue-400 text-white p-2">آیتم 1</div>
  <div class="bg-green-400 text-white p-2">آیتم 2</div>
  <div class="bg-red-400 text-white p-2">آیتم 3</div>
</div>

📌 آیتم‌ها فقط بین خودشون فاصله دارن، از بیرون container فاصله‌ای اضافه نمیشه.

🔹 مثال (عمودی – space-y)

<div class="flex flex-col space-y-4 bg-gray-200 p-4">
  <div class="bg-purple-400 text-white p-2">بخش A</div>
  <div class="bg-yellow-400 text-white p-2">بخش B</div>
  <div class="bg-pink-400 text-white p-2">بخش C</div>
</div>

📌 آیتم‌ها به صورت عمودی با فاصله‌ی یکنواخت از هم جدا شدن.

🔹 نکته مهم

• space-x و space-y فقط روی فرزندان مستقیم یک container اعمال میشن.

• اگر آیتم آخر هم نباید فاصله داشته باشه، Tailwind خودش اینو مدیریت می‌کنه (آخرین آیتم فاصله اضافه نداره).

• برای ریسپانسیو می‌تونی مثلا بگی:

  <div class="space-y-2 md:space-y-6 lg:space-y-12">...</div>