Padding

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 بالای یک عنصر

صفحهٔ بعد»

«صفحهٔ قبل