Padding

« صفحهٔ قبل

صفحهٔ بعد »

این عنصر دارای 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> تنظیم می‌کند:

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

مشاهدهٔ نتیجه

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 راست):

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

مشاهدهٔ نتیجه

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

مثال

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

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

مشاهدهٔ نتیجه

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

تنظیم 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 بالای یک عنصر

« صفحهٔ قبل

صفحهٔ بعد »