Padding

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

این عنصر دارای padding 70px است.

This element has a padding of 70px.


ویژگی‌های padding در CSS برای ایجاد فاصله در اطراف محتوای یک عنصر، درون هر گونه کادر تعریف شده‌ای استفاده می‌شوند.[۱]

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

Padding - جهت های جداگانه

CSS ویژگی‌هایی برای مشخص کردن padding برای هر جهت یک عنصر دارد:

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

تمامی ویژگی‌های padding می‌توانند مقادیر زیر را داشته باشند:

  • length - مقدار padding را بر حسب px , pt ,cm، و غیره مشخص می‌کند
  • % - مقدار padding را بر حسب % ای از عرض عنصری که در آن قرار گرفته مشخص می‌کند
  • inherit - مشخص می‌کند که فاصله padding می‌بایست از عنصر والد ارث بری کند

نکته:مقادیر منفی مجاز هستند.

مثال

مقادیر متفاوت padding برای چهار جهت یک عنصر <div> تنظیم می‌کند:

1 div {
2   padding-top: 50px;
3   padding-right: 30px;
4   padding-bottom: 50px;
5   padding-left: 80px;
6 }


Padding - ویژگی کوتاه شده

برای کوتاه سازی کد، می‌توان که تمامی ویژگی‌های padding را در یک ویژگی مشخص کرد.

ویژگی padding یک ویژگی مختصر برای ویژگی‌های مجزای padding زیر است:

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

بنابراین، شیوه کار به این صورت است:

اگر ویژگی padding چهار مقدار داشته باشد:
  • مقدار padding بالا ۲۵ پیکسل است
  • مقدار padding سمت راست ۵۰ پیکسل است
  • مقدار padding پایین ۷۵ پیکسل است
  • مقدار padding سمت چپ ۱۰۰ پیکسل است
padding: 25px 50px 75px 100px;

مثال

از ویژگی مختصر padding با چهار مقدار استفاده می‌کند:

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


اگر ویژگی padding سه مقدار داشته باشد:
  • padding بالا ۲۵ پیکسل است
  • padding سمت راست و چپ ۵۰ پیکسل هستند
  • padding پایین ۷۵ پیکسل است
padding: 25px 50px 75px;

مثال

از ویژگی مختصر padding با سه مقدار استفاده می‌کند:

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



اگر ویژگی padding دو مقدار داشته باشد:
  • مقدار padding بالا و پایین ۲۵ پیکسل هستند
  • مقدار padding راست و چپ ۵۰ پیکسل هستند
padding: 25px 50px;

مثال

از ویژگی مختصر padding با دو مقدار استفاده می‌کند:

div {
  padding: 25px 50px;
}


اگر ویژگی padding یک مقدار داشته باشد:
  • تمامی چهار padding برابر با ۲۵ پیکسل هستند
padding: 25px;

مثال

از ویژگی مختصر padding با یک مقدار استفاده می‌کند:

div {
  padding: 25px;
}


Padding و عرض عنصر

ویژگی width در CSS عرض ناحیه محتوای یک عنصر را مشخص می‌کند. ناحیه محتوا بخشی درون padding، کادر، و margin یک عنصر (مدل جعبه) است.

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

مثال

در اینجا، عرض عنصر <div>، ۳۰۰ پیکسل داده شده‌است. اما عرض واقعی عنصر <div>، ۳۵۰ پیکسل خواهد بود (25px + 300px padding چپ + 25px padding راست):

1 div {
2   width: 300px;
3   padding: 25px;
4 }


برای حفط اندازه عرض برابر با ۳۰۰ پیکسل، بدون توجه به مقدار padding، می‌توانید از ویژگی box-sizing استفاده کنید. این امر موجب می‌شود که عنصر عرض خود را حفظ کند، اگر شما مقدار padding را افزایش دهید، فضای محتوای موجود کاهش خواهد یافت.

مثال

استفاده از ویژگی box-sizing برای نگه داشتن عرض در ۳۰۰ پیکسل، بدون توجه به مقدار padding:

1 div {
2   width: 300px;
3   padding: 25px;
4   box-sizing: border-box;
5 }


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

تنظیم padding چپ

این مثال نحوه تنظیم padding چپ یک عنصر <p> را مشخص می‌کند.

تنظیم padding راست

این مثال نحوه تنظیم padding راست یک عنصر <p> را نمایش می‌دهد.

تنظیم padding بالا

این مثال نحوه تنظیم padding بالای یک عنصر <p> را نمایش می‌دهد.

تنظیم padding پایین

این مثال نحوه تنظیم padding پایین عنصر <p> را نمایش می‌دهد.

خود را با تمرین‌ها آزمایش کنید!

تمام ویژگی‌های padding در CSS

ویژگی توضیحات
padding یک ویژگی مختصر برای تنظم تمامی ویژگی‌های padding در یک اعلان
padding-bottom تنظیم padding پایین یک عنصر
padding-left تنظیم padding چپ یک عنصر
padding-right تنظیم padding راست یک عنصر
padding-top تنظیم padding بالای یک عنصر


منابع آموزشی