🔹 Padding چیه؟

ویژگی padding فضای خالی داخل عنصر (بین محتوای عنصر و مرز آن) رو مشخص می‌کنه.
مثلاً توی یک دکمه باعث میشه متن از لبه‌ها فاصله بگیره.

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

کلاس‌های padding توی Tailwind خیلی متنوع هستن و الگوی ثابتی دارن:

• p-{size} → پدینگ برای همه جهات.

• px-{size} → پدینگ افقی (چپ و راست).

• py-{size} → پدینگ عمودی (بالا و پایین).

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

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

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

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

🔹 مقادیر پدینگ (size)

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

• p-0 → 0px

• p-1 → 0.25rem (معادل 4px)

• p-2 → 0.5rem (معادل 8px)

• p-4 → 1rem (معادل 16px)

• p-8 → 2rem (معادل 32px)
  و ...

📌 می‌تونی توی تنظیمات Tailwind این مقیاس رو شخصی‌سازی کنی.

🔹 مثال (پدینگ برای همه جهات)

<div class="p-4 bg-blue-400 text-white">
  این یک باکس با padding همه‌جانبه است
</div>

🔹 مثال (پدینگ افقی و عمودی)

<div class="px-6 py-2 bg-green-400 text-white">
  این باکس padding افقی و عمودی داره
</div>

🔹 مثال (پدینگ جدا برای هر جهت)

<div class="pt-4 pr-8 pb-2 pl-6 bg-red-400 text-white">
  این باکس padding متفاوت برای هر طرف داره
</div>

🔹 نکته مهم

• پدینگ توی طراحی ریسپانسیو خیلی مهمه. مثلا:

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

  📌 روی موبایل پدینگ کم باشه، روی دسکتاپ بیشتر.

• پدینگ با margin فرق داره → پدینگ داخل عنصره ولی مارجین بیرون عنصر.