اگر متن یک دکمه به لبه‌هاش چسبیده یا نوشته‌های یک کارت خیلی فشرده شده، احتمالاً باید Padding در CSS رو تنظیم کنی. Padding به محتوای داخل یک کادر فضای نفس‌کشیدن می‌ده.
این دو دکمه رو مقایسه کن؛ فقط فاصله داخلی‌شون متفاوته:
padding: 1px 2px;padding: 12px 24px;اول جای Padding رو در یک جعبه می‌بینی، بعد نحوه نوشتن کدها رو یاد می‌گیری و با ابزار تعاملی خودت نتیجه رو تغییر می‌دی.
Padding در CSS چیست؟
Padding فاصله بین محتوای یک عنصر و خط دور اون (Border) است. مثلاً متن «ثبت‌نام در دوره» محتوای دکمه‌ست. فاصله بین متن و کادر آبی دکمه همون Padding است.
padding: 20px; یعنی در هر چهار طرف محتوا ۲۰ پیکسل فاصله داخلی ایجاد بشه.Border همون خطی است که دور جعبه کشیده می‌شه. اگر Border رو نمایش ندی، Padding همچنان وجود داره؛ فقط مرزش با چشم مشخص نیست.
Padding در Box Model کجاست؟
مرورگر هر عنصر رو مثل یک جعبه می‌بینه. از وسط به بیرون، این چهار لایه رو داریم: Content یعنی متن یا تصویر، Padding یعنی فاصله داخلی، Border یعنی خط دور جعبه و Margin یعنی فاصله بیرون اون.
رنگ طلایی، ناحیه Padding است. این نمودار برای نشان‌دادن لایه‌ها طراحی شده، نه نمایش اندازه واقعی یک عنصر خاص.
اگر بخوای این بخش‌ها رو در صفحه خودت ببینی، روی عنصر راست‌کلیک کن، Inspect رو بزن و قسمت Computed / Box Model رو باز کن.
تفاوت Padding و Margin چیه؟
این دو ویژگی هر دو فاصله ایجاد می‌کنن، اما Padding داخل کادر و Margin بیرون کادر قرار می‌گیره.
فضای طلایی بین متن و خط آبی، Padding واقعی کادر است.
فضای خاکستری بیرون خط آبی، با margin: 25px; خود کارت ایجاد شده.
کِی کدوم رو بنویسیم؟ برای دورکردن متن از لبه دکمه یا کارت، Padding بده. برای فاصله انداختن بین دو کارت یا جداکردن یک بخش از بخش کناری، معمولاً Margin یا gap مناسبه.
.card { padding: 20px; } /* فاصله متن تا لبه کارت */
.card { margin-bottom: 20px; } /* فاصله بیرونی کارت */سؤال کوتاه: اگر متن داخل یک دکمه به حاشیه آبی چسبیده باشه، Padding رو تغییر می‌دی یا Margin رو؟ پاسخ: Padding.
چطور Padding رو برای چهار جهت تنظیم کنیم؟
گاهی فقط می‌خوای فاصله یک سمت بیشتر بشه. برای این کار چهار ویژگی جداگانه داریم:
padding-top: فاصله داخلی بالاpadding-right: فاصله داخلی راستpadding-bottom: فاصله داخلی پایینpadding-left: فاصله داخلی چپ
در مثال زیر بالا و پایین ۲۰ پیکسل و راست و چپ ۳۰ پیکسل فاصله دارن. رنگ طلایی کمک می‌کنه فاصله رو واضح ببینی.
امتحان کن: کد رو کپی کن و مقدار padding-left: 30px رو به 60px تغییر بده. فقط فاصله سمت چپ بیشتر می‌شه.
چطور Padding رو در یک خط بنویسیم؟
لازم نیست همیشه چهار خط بنویسی. padding یک ویژگی مختصرنویسی (Shorthand) است؛ با یک تا چهار مقدار می‌تونی فاصله‌ها رو مشخص کنی.
برای چهار عدد، همیشه از بالا شروع کن و ساعت‌گرد برو: بالا، راست، پایین، چپ. فارسی یا انگلیسی بودن صفحه این ترتیب رو تغییر نمی‌ده.
| تعداد عدد | کد | فاصله ایجادشده |
|---|---|---|
| یک عدد | padding: 20px; | هر چهار طرف ۲۰ |
| دو عدد | padding: 12px 24px; | بالا و پایین ۱۲؛ راست و چپ ۲۴ |
| سه عدد | padding: 10px 20px 30px; | بالا ۱۰؛ راست و چپ ۲۰؛ پایین ۳۰ |
| چهار عدد | padding: 10px 20px 30px 40px; | بالا ۱۰؛ راست ۲۰؛ پایین ۳۰؛ چپ ۴۰ |
تفاوت چهار حالت رو داخل همین کادرهای رنگی هم ببین:
تمرین: در کلاس .four عدد آخر رو از 40px به 5px تغییر بده؛ می‌بینی فاصله سمت چپ کم می‌شه.
آزمایشگاه تعاملی؛ خودت Padding رو تغییر بده
از اسلایدرها استفاده کن تا فاصله بالا، راست، پایین و چپ محتوای سفید رو تغییر بدی. رنگ طلایی همون Padding است و هم‌زمان کد CSS ساخته می‌شه.
پیش‌نمایش زنده — فضای طلایی Padding و خط آبی Border است:
این ابزار فقط مقادیر غیرمنفی رو با واحد px تولید می‌کنه. در
ادامه
مقاله با واحدهایی مانند rem و درصد نیز آشنا می‌شی. رنگ پس‌زمینه و حاشیه آبی صرفاً برای
واضح‌تر شدن
پیش‌نمایش هستند.
برای شروع، اسلایدر راست رو تا ۶۰ پیکسل جابه‌جا کن. بعد «کپی کد» رو بزن و خروجی رو در فایلی با پسوند .html ذخیره کن.
آیا Padding اندازه کارت رو بزرگ‌تر می‌کنه؟
بله، بسته به تنظیم box-sizing. فرض کن عرض محتوای یک کارت ۳۰۰ پیکسله. اگر در چپ و راست هرکدوم ۲۰ پیکسل Padding و ۲ پیکسل Border داشته باشه، در حالت content-box عرض بیرونی کارت می‌شه:
content-boxعرض ۳۰۰ پیکسل فقط برای محتواست؛ Padding و Border به اون اضافه می‌شن.
عرض بیرونی: ۳۴۴pxborder-boxPadding و Border داخل همون عرض ۳۰۰ پیکسلی حساب می‌شن.
عرض بیرونی: ۳۰۰pxبرای طراحی کارت‌هایی با عرض مشخص، معمولاً box-sizing: border-box; انتخاب راحت‌تریه. هر دو حالت رو در خروجی کنار کد مقایسه کن:
امتحان کن: مقدار padding: 20px رو در هر دو کارت به 40px تغییر بده. عرض بیرونی کارت اول بزرگ‌تر می‌شه، ولی کارت دوم همچنان عرض ۳۰۰ پیکسلی داره.
Padding رو با چه واحدهایی می‌تونیم بنویسیم؟
برای شروع، px کافیه. وقتی به فاصله‌های انعطاف‌پذیرتر نیاز داشتی، با این واحدها هم آشنا باش:
| واحد | مثال | معنی ساده |
|---|---|---|
px | padding: 20px; | ۲۰ پیکسل فاصله |
rem | padding: 1.5rem; | ۱٫۵ برابر اندازه فونت ریشه صفحه |
em | padding: 1.5em; | ۱٫۵ برابر اندازه فونت خود عنصر |
% | padding: 10%; | در حالت معمول افقی، درصدی از عرض بلوک مرجع |
padding-top: 10% برابر ۴۰ پیکسل می‌شه؛ نه ۱۰ درصد ارتفاع. برای padding-left هم همین مبنای عرض به کار می‌ره.اگر اندازه فونت ریشه ۱۶ پیکسل باشه، 1.5rem برابر ۲۴ پیکسل می‌شه. Padding مقدار منفی و auto قبول نمی‌کنه و مقدار اولیه‌اش صفره.
Padding در پروژه واقعی؛ کارت، دکمه و موبایل
حالا یک کارت دوره می‌سازیم. padding: 24px باعث می‌شه عنوان و توضیح کارت به لبه نچسبن. در دکمه هم padding: 12px 24px فضای بیشتری در راست و چپ ایجاد می‌کنه.
تمرین کوتاه: در کلاس .course-card مقدار ۲۴ رو به ۸ تغییر بده و کادر رو با حالت قبلی مقایسه کن.
Padding در سایت‌های فارسی و انگلیسی چه فرقی داره؟
padding-right همیشه سمت راست فیزیکی رو تغییر می‌ده؛ اما padding-inline-start سمت شروع متن رو در نظر می‌گیره: در متن افقی فارسی معمولاً راست و در متن انگلیسی معمولاً چپ.
.item { padding-inline-start: 20px; }
/* در rtl سمت راست، در ltr سمت چپ */برای فاصله در هر دو طرف محور نوشتار می‌تونی padding-inline رو به کار ببری. فعلاً اگر صفحه‌ات فقط فارسیه، استفاده از چهار ویژگی معمولی Padding هم کاملاً قابل فهم و کاربردیه.
Padding روی موبایل چطور تنظیم می‌شه؟
کارت با فاصله داخلی ۳۲ پیکسل ممکنه روی موبایل فضای زیادی بگیره. با یک Media Query می‌تونی فاصله داخلی رو برای نمایشگر کوچک کمتر کنی:
.course-card { padding: 32px; }
@media (max-width: 650px) {
.course-card { padding: 16px; }
}عرض پنجره مرورگر رو کم کن تا اثر Media Query رو ببینی. این تغییر مربوط به فضای داخلی کارته، نه فاصله اون تا کارت‌های کناری.
اشتباهات رایج موقع استفاده از Padding
کارت از عرض صفحه بیرون زده
وقتی width: 100% داری و در حالت content-box به کارت Padding می‌دی، ممکنه عرض بیرونی از ظرفش بیشتر بشه. اول box-sizing: border-box رو بررسی کن.
مقدار Padding تغییر نمی‌کنه
ممکنه اسم کلاس رو اشتباه نوشته باشی یا یک قانون CSS دیگه مقدارش رو بازنویسی کرده باشه. از Inspect → Computed → Box Model برای دیدن مقدار واقعی استفاده کن.
Padding عمودی span رفتار عجیبی داره
در عنصرهای Inline معمولی، Padding بالا و پایین لزوماً ارتفاع خط رو تغییر نمی‌ده. برای برچسب‌های مستقل، display: inline-block اغلب انتخاب مناسب‌تریه.
دو سؤال کوتاه و پرکاربرد
آیا Padding به فرزند ارث می‌رسه؟ نه، مقدار Padding به‌صورت پیش‌فرض ارث‌بری نمی‌شه.
برای فاصله داخل دکمه Padding بهتره یا Width؟ Padding فاصله دور متن رو حفظ می‌کنه و معمولاً برای دکمه‌هایی با متن متفاوت انعطاف بهتری داره.
تمرین پایانی: خودت یک کارت طراحی کن
کد اولیه رو کپی کن و این سه تغییر رو انجام بده:
- برای کارت
padding: 24px;بنویس. - برای دکمه
padding: 12px 24px;تنظیم کن. - مقدار Padding کارت رو یک بار به ۸ و یک بار به ۴۰ پیکسل تغییر بده و نتیجه رو مقایسه کن.
پاسخ تمرین رو ببین (بعد از اینکه خودت امتحان کردی)
در پاسخ، فقط دو مقدار Padding که صفر بودن اصلاح شدن. کد زیر رو می‌تونی کامل کپی و اجرا کنی.
جمع‌بندی؛ کِی از Padding استفاده کنیم؟
هر وقت لازم داری محتوای یک عنصر از لبه داخلی خودش فاصله بگیره، از Padding استفاده کن. برای فاصله بیرون کادر از Margin یا gap استفاده می‌شه. چهار جهت رو می‌تونی جداگانه بنویسی یا با padding کوتاه کنی. اگر کارتت بعد از افزودن Padding بزرگ‌تر شد، box-sizing رو بررسی کن.
برای تثبیت یادگیری، بهترین کار اینه که مقدار Padding یک کارت یا دکمه رو چند بار تغییر بدی و خروجی رو هم‌زمان ببینی.
می‌خوای طراحی سایت رو اصولی یاد بگیری؟
اگر با Padding و CSS شروع کردی و می‌خوای HTML، CSS و JavaScript رو در یک مسیر پروژه‌محور یاد بگیری، دوره طراحی سایت تحلیل‌داده می‌تونه قدم بعدیت باشه. کلاس‌ها حضوری و آنلاین زنده‌اند و امکان رفع اشکال مستقیم با مدرس و AnyDesk وجود داره.