Padding یکی از مهم‌ترین ویژگی‌های CSS Box Model است که به ما امکان می‌دهد فاصله داخلی بین محتوا و حاشیه (Border) یک عنصر را تنظیم کنیم.

این ویژگی برای ایجاد فضای مناسب بین محتوا و حاشیه، بهبود خوانایی و سازمان‌دهی چیدمان در صفحات وب بسیار مفید است.

۱. Padding در CSS چیست؟

Padding فاصله‌ای است که بین محتوای یک عنصر و حاشیه‌ی (Border) آن عنصر ایجاد می‌شود. این مقدار فقط داخل عنصر اعمال می‌شود و برخلاف margin تأثیری روی فاصله‌ی بین عناصر دیگر ندارد.

ساختار Padding در Box Model:

┌──────────────────────────┐
│         Margin          │  (حاشیه بیرونی)
│ ┌──────────────────────┐ │
│ │       Border        │ │  (حاشیه مرزی)
│ │ ┌──────────────────┐ │ │
│ │ │    Padding      │ │ │  (حاشیه داخلی)
│ │ │ ┌──────────────┐ │ │ │
│ │ │ │   Content   │ │ │ │  (محتوا)
│ │ │ └──────────────┘ │ │ │
│ │ └──────────────────┘ │ │
│ └──────────────────────┘ │
└──────────────────────────┘

۲. نحوه تنظیم Padding در CSS

✅ ۱. استفاده از padding برای تنظیم فاصله داخلی کلی

.box {
    padding: 20px;
    background-color: lightgray;
}

🔹 نتیجه:

• این مقدار 20px به تمام جهات (بالا، پایین، چپ، راست) اعمال می‌شود.

✅ ۲. تنظیم Padding برای هر جهت به‌صورت جداگانه

.box {
    padding-top: 10px;    /* فاصله داخلی از بالا */
    padding-right: 15px;  /* فاصله داخلی از راست */
    padding-bottom: 20px; /* فاصله داخلی از پایین */
    padding-left: 25px;   /* فاصله داخلی از چپ */
}

🔹 نتیجه:

• هر جهت مقدار مجزایی از padding دارد.

✅ ۳. استفاده از padding به‌صورت خلاصه‌نویسی

Padding را می‌توان به چهار روش مختلف به‌صورت خلاصه نوشت:

.box {
    padding: 10px 20px 30px 40px;
}

🔹 ترتیب مقادیر:
padding: بالا راست پایین چپ;

🔹 مثال‌های دیگر:

padding: 20px;       /* همه جهات 20px */
padding: 10px 20px;  /* بالا و پایین 10px، چپ و راست 20px */
padding: 10px 20px 30px; /* بالا 10px، چپ و راست 20px، پایین 30px */

۳. مقداردهی خاص برای Padding در CSS

✅ ۱. استفاده از واحدهای مختلف

Padding می‌تواند با واحدهای مختلف تعریف شود:

padding: 10px;   /* پیکسل */
padding: 2em;    /* بر اساس اندازه فونت */
padding: 5%;     /* درصدی از عرض والد */
padding: 1rem;   /* بر اساس ریشه‌ی فونت */

🔹 تفاوت:

• px مقدار ثابت است و تغییری نمی‌کند.
• em و rem نسبت به اندازه فونت تغییر می‌کنند.
• % بر اساس اندازه‌ی عنصر والد تنظیم می‌شود.

✅ ۲. استفاده از padding: inherit و padding: auto

.box {
    padding: inherit; /* مقدار را از عنصر والد به ارث می‌برد */
}

🔹 کاربرد: اگر padding عنصر والد مقدار خاصی داشته باشد، مقدار آن به فرزند نیز اعمال می‌شود.

.box {
    padding: auto; /* مقدار خودکار بر اساس محتوای داخل */
}

🔹 کاربرد: مقدار auto به ندرت استفاده می‌شود و معمولاً مقدار مشخصی برای padding تعیین می‌شود.

۴. ترکیب Padding با box-sizing

به‌صورت پیش‌فرض، Padding به اندازه‌ی کلی عنصر اضافه می‌شود. اگر بخواهید اندازه عنصر ثابت بماند و Padding فقط داخل آن تنظیم شود، از box-sizing: border-box; استفاده کنید.

.box {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

🔹 نتیجه: width شامل padding خواهد شد و عنصر از اندازه‌ی ۲۰۰ پیکسل فراتر نمی‌رود.

۵. کاربردهای Padding در طراحی وب

✅ ۱. افزایش خوانایی محتوا – ایجاد فضای داخلی مناسب بین متن و حاشیه.
✅ ۲. بهبود تجربه کاربری – دکمه‌ها و فیلدهای ورودی دارای padding مناسب برای دسترسی آسان‌تر.
✅ ۳. ایجاد طرح‌بندی بهتر – ایجاد فاصله داخلی در کارت‌ها، فرم‌ها و جعبه‌های محتوایی.

🎯 مثال کاربردی:

.button {
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border-radius: 5px;
}

🔹 نتیجه: دکمه زیباتر و خواناتر می‌شود.

۶. نتیجه‌گیری

🔹 Padding در CSS برای تنظیم فاصله داخلی یک عنصر از محتوای آن تا حاشیه‌ی (Border) آن استفاده می‌شود.
🔹 می‌توان مقدار padding را برای هر جهت به‌صورت جداگانه یا خلاصه تنظیم کرد.
🔹 استفاده از box-sizing: border-box; به مدیریت بهتر اندازه‌ی عناصر کمک می‌کند.
🔹 Padding برای بهبود خوانایی، دسترسی‌پذیری و زیبایی طراحی وب بسیار مهم است.