فاصله داخلی (Padding)

آشنایی با ویژگی padding در CSS، فاصله بین محتوا و حاشیه عنصر و تفاوت آن با Margin

فاصله داخلی (Padding) چیست؟

Padding فضای داخلی بین محتوای عنصر و حاشیه (Border) آن است. در واقع Padding «بالشتک» داخلی است که محتوا را از لبه‌های عنصر فاصله می‌دهد.

Padding کجای Box Model قرار دارد؟

/* از بیرون به داخل */
    Margin → Border → <strong>Padding</strong> → Content

تفاوت Padding و Margin

ویژگیPaddingMargin
موقعیتداخل حاشیهخارج حاشیه
رنگ پس‌زمینه✅ پس‌زمینه می‌گیرد❌ شفاف است
کلیک‌پذیر✅ قابل کلیک است❌ قابل کلیک نیست
مقدار منفی❌ مجاز نیست✅ مجاز است
Collapse❌ ادغام نمی‌شود✅ ادغام می‌شود
auto❌ مجاز نیست✅ مجاز است

ویژگی‌های Padding

ویژگیتوضیح
padding-topفاصله داخلی از بالا
padding-rightفاصله داخلی از راست
padding-bottomفاصله داخلی از پایین
padding-leftفاصله داخلی از چپ
paddingخلاصه همه (Shorthand)

نحوه مقداردهی (Shorthand)

مانند Margin، می‌تواند ۱ تا ۴ مقدار بگیرد:

/* ۱ مقدار — همه طرف‌ها */
    padding: 20px;
    
    /* ۲ مقدار — عمودی | افقی */
    padding: 10px 20px;
    
    /* ۳ مقدار — بالا | چپ‌راست | پایین */
    padding: 10px 20px 30px;
    
    /* ۴ مقدار — بالا | راست | پایین | چپ (ساعتگرد) */
    padding: 10px 20px 30px 40px;

تأثیر Padding بر ابعاد عنصر

⚠️ هشدار مهم: Padding به عرض و ارتفاع عنصر اضافه می‌شود!

.box {
        width: 200px;
        padding: 20px;
        /* عرض واقعی = 200 + 20 + 20 = 240px! */
    }

راه‌حل: box-sizing

/* با این تنظیم، padding داخل width محاسبه می‌شود */
    * {
        box-sizing: border-box;
    }
    
    .box {
        width: 200px;
        padding: 20px;
        /* عرض واقعی = 200px ✅ */
    }

واحدهای Padding

واحدتوضیحکاربرد
pxپیکسل ثابتدقیق و قابل پیش‌بینی
emنسبی به فونت عنصرمقیاس‌پذیر با فونت
remنسبی به فونت ریشهیکنواخت در کل سایت
%درصد از عرض والدریسپانسیو

Padding در المان‌های مختلف

دکمه‌ها

.btn {
        padding: 10px 24px;  /* عمودی کم، افقی زیاد */
        background: #3498db;
        color: white;
        border: none;
        border-radius: 6px;
    }

کارت‌ها

.card {
        padding: 20px;  /* یکنواخت */
        background: white;
        border-radius: 12px;
    }

ورودی‌های فرم

input {
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

ترفندهای Padding

۱. نسبت تصویر با Padding

با استفاده از Padding درصدی می‌توان نسبت تصویر ثابت ساخت:

/* مربع ۱:۱ */
    .square {
        width: 100%;
        padding-top: 100%;  /* ارتفاع = عرض */
        position: relative;
    }
    
    /* سینما ۱۶:۹ */
    .widescreen {
        width: 100%;
        padding-top: 56.25%;  /* 9/16 = 0.5625 */
        position: relative;
    }

۲. فاصله یکنواخت با em

.text-block {
        padding: 2em;
        font-size: 16px;
        /* padding با تغییر فونت مقیاس می‌شود */
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط