CSS

جلسه 7: خاصیت Padding در CSS

خصوصیت Padding در CSS، برای ایجاد فضای خالی مابین محتوا و مرز تعریف شده به کار می رود.

شما در CSS میتوانید برای جهات (بالا، پایین، چپ و راست) عنصر خود Padding مشخص کنید.

Padding در جهات مختلف

با خصوصیات زیر میتوانید برای هر جهت از عنصر خود فضای خالی داخلی ایجاد کنید:

  • padding-top: فضای داخلی در جهت بالا
  • padding-right: فضای داخلی در جهت راست
  • padding-bottom: فضای داخلی در جهت پایین
  • padding-left: فضای داخلی در جهت چپ
تمام خواص padding می توانند مقادیر زیر را داشته باشند:
  • طول بر اساس px، pt، cm و غیره.
  • طول بر اساس ٪ درصد ٪ .
  • inherit – مشخص می کند که padding باید از عنصر پدر خود به ارث برده شود.

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

اگر به مثال زیر دقت کنید متوجه خواهید شد که به چهار جهت متن یا عنصر html پدینگ داده ایم:

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 50 پیکسل از بالا، 30 پیکسل از راست، 50 پیکسل از پایین و 80 پیکسل از چپ است.

 

Padding مختصر و کوتاه

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

در صورتی که بخواهیم هر چهار ویژگی Padding را در یک ویژگی بگنجانیم به صورت زیر عمل می کنیم:

padding: 25px 50px 75px 100px؛

  • مقدار اول: پدینگ 25 پیکسل از جهت بالا
  • مقدار دوم: پدینگ 50 پیکسل از جهت راست
  • مقدار سوم: پدینگ 75 پیکسل از جهت پایین
  • مقدار چهارم: پدینگ 100 پیکسل از جهت چپ

مقادیر در جهت حرکت عقربه های ساعت بر عنصر اعمال می شوند. به مثال زیر دقت کنید:

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از بالا، 50 پیکسل از راست، 75 پیکسل از پایین و 100 پیکسل از چپ است.

 

اگر خاصیت padding دارای سه مقدار باشد:

padding: 25px 50px 75px؛

  • مقدار اول: پدینگ 25 پیکسل از جهت بالا
  • مقدار دوم: پدینگ 50 پیکسل از جهت چپ و راست
  • مقدار سوم: پدینگ 75 پیکسل از جهت پایین

در صورتی که خاصیت Padding دارای سه مقدار باشد، مقدار دوم در جهات چپ و راست اعمال خواهد شد.

به مثال زیر دقت کنید:

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از جهت بالا، 50 پیکسل از جهت چپ و راست و 75 پیکسل از جهت پایین است.

 

اگر خاصیت padding دارای دو مقدار باشد:

padding: 25px 50px;

  • مقدار اول: پدینگ 25 پیکسل از جهت بالا و پایین
  • مقدار دوم: پدینگ 50 پیکسل از جهت چپ و راست

در صورتی که پدینگ دارای دو مقدار باشد، مقدار اول در جهات بالا و پایین و مقدار دوم در جهات چپ و راست اعمال خواهد شد.

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از جهت بالا و پایین و 50 پیکسل از جهت چپ و راست است.

 

اگر خاصیت padding دارای یک مقدار باشد:

padding: 25px;

  • در صورتی که پدینگ دارای یک مقدار باشد، به تمام جهت یک میزان پدینگ اعمال خواهد شد.

به مثال زیر دقت کنید:

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از بالا ،پایین، چپ و راست است.
 

جلسه بعد 

جلسه قبل

امتیاز

میانگین امتیاز

امتیاز کاربران: اولین نفر باشید!
برچسب ها

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شانزده − 4 =

دکمه بازگشت به بالا
بستن