فاصله داخلی در CSS

این عنصر دارای فاصله داخلی (padding) به اندازه ۷۰ پیکسل است.

معرفی ویژگی‌های Padding در CSS

ویژگی‌های padding در CSS برای ایجاد فضای داخلی در اطراف محتوای یک عنصر استفاده می‌شوند؛ این فضا درون مرزهای (border) تعریف‌شده عنصر قرار دارد.

در CSS، کنترل کامل بر روی فاصله داخلی دارید. می‌توانید برای هر طرف عنصر (بالا، راست، پایین، چپ) به‌صورت جداگانه مقدار padding تعیین کنید، یا از یک ویژگی خلاصه‌نویسی‌شده برای تنظیم همه‌ی مقادیر padding در یک خط استفاده نمایید.

Padding برای هر طرف به‌صورت جداگانه

CSS ویژگی‌هایی برای تعیین فاصله داخلی هر طرف عنصر دارد:

• padding-top — تعیین فاصله داخلی از بالا
• padding-right — تعیین فاصله داخلی از سمت راست
• padding-bottom — تعیین فاصله داخلی از پایین
• padding-left — تعیین فاصله داخلی از سمت چپ

مقادیر قابل‌استفاده برای ویژگی‌های padding عبارت‌اند از:

• length — تعیین فاصله با واحدهایی مانند px، pt، cm و غیره
• % — تعیین فاصله به‌صورت درصدی از عرض عنصر والد
• inherit — مقدار فاصله از عنصر والد به ارث برده می‌شود

 توجه: استفاده از مقادیر منفی برای padding مجاز نیست.

مثال

تنظیم فاصله‌های داخلی متفاوت برای چهار طرف یک عنصر <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

ویژگی خلاصه‌نویسی‌شده padding

برای کوتاه‌تر کردن کد، می‌توان همه‌ی مقادیر padding را در یک خط مشخص کرد.

ویژگی padding یک ویژگی خلاصه‌نویسی‌شده برای ویژگی‌های زیر است:

• padding-top
• padding-right
• padding-bottom
• padding-left

نحوه عملکرد:

اگر چهار مقدار مشخص شود:

padding: 25px 50px 75px 100px;

• فاصله داخلی از بالا: ۲۵ پیکسل
• فاصله داخلی از راست: ۵۰ پیکسل
• فاصله داخلی از پایین: ۷۵ پیکسل
• فاصله داخلی از چپ: ۱۰۰ پیکسل

div {
  padding: 25px 50px 75px 100px;
}

اگر سه مقدار مشخص شود:

padding: 25px 50px 75px;

• فاصله داخلی از بالا: ۲۵ پیکسل
• فاصله داخلی از راست و چپ: ۵۰ پیکسل
• فاصله داخلی از پایین: ۷۵ پیکسل

اگر دو مقدار مشخص شود:

padding: 25px 50px;

• فاصله داخلی از بالا و پایین: ۲۵ پیکسل
• فاصله داخلی از راست و چپ: ۵۰ پیکسل

div {
  padding: 25px 50px;
}

اگر فقط یک مقدار مشخص شود:

padding: 25px;

• فاصله داخلی از همه‌ی جهات: ۲۵ پیکسل

div {
  padding: 25px;
}

ارتباط padding با عرض عنصر

ویژگی width در CSS، عرض ناحیه محتوای عنصر را مشخص می‌کند. ناحیه محتوا (content area) بخشی از عنصر است که درون padding، border و margin قرار دارد (مطابق با مدل جعبه‌ای یا Box Model).

بنابراین، اگر برای یک عنصر عرض مشخصی تعیین شده باشد، مقدار padding به آن اضافه می‌شود و در نتیجه عرض واقعی عنصر افزایش می‌یابد. این موضوع معمولاً نتیجه‌ی مطلوبی نیست.

مثال

در این مثال، عنصر <div> دارای عرض ۳۰۰ پیکسل است. اما به دلیل وجود padding به اندازه ۲۵ پیکسل در چپ و راست، عرض واقعی عنصر به ۳۵۰ پیکسل افزایش می‌یابد:

div {
  width: 300px;
  padding: 25px;
}

ویژگی box-sizing و کنترل padding

ویژگی box-sizing مشخص می‌کند که عرض و ارتفاع یک عنصر چگونه محاسبه شوند: آیا padding و border در محاسبه لحاظ شوند یا خیر.

مقادیر قابل‌استفاده برای box-sizing عبارت‌اند از:

• content-box (پیش‌فرض): فقط ناحیه محتوا در محاسبه‌ی عرض و ارتفاع لحاظ می‌شود (padding و border محاسبه نمی‌شوند)
• border-box: عرض و ارتفاع شامل محتوا، padding و border می‌شوند

برای اینکه عرض عنصر همیشه ثابت بماند (مثلاً ۳۰۰ پیکسل)، صرف‌نظر از مقدار padding، می‌توانید از box-sizing: border-box; استفاده کنید. در این حالت، اگر padding افزایش یابد، فضای قابل‌استفاده برای محتوا کاهش می‌یابد، اما عرض کلی عنصر تغییر نمی‌کند.

مثال

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

مثال‌های بیشتر

تنظیم فاصله داخلی از سمت چپ برای یک عنصر <p>:

p {
  padding-left: 40px;
}

تنظیم فاصله داخلی از سمت راست:

p {
  padding-right: 40px;
}

تنظیم فاصله داخلی از بالا:

p {
  padding-top: 40px;
}

تنظیم فاصله داخلی از پایین:

p {
  padding-bottom: 40px;
}

فهرست کامل ویژگی‌های CSS مربوط به Padding