padding در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش padding در CSS با من همراه باشید.

خصوصیت padding فضای خالی بین محتوی و لبه های یک عنصر را تنظیم می کند، رنگ پس زمینه این فضا از رنگ پس زمینه عنصر پیروی می کند.

می توان اندازه آن را برای ضلع های مختلف (بالا، راست، پایین و چپ) به صورت کلی و یا جزء به جزء تعیین نمود.

مقادیر ممکن خصوصیت Padding

خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:

length : یک حاشیه ثابت تعریف می شود (px, pt, em)

% : درصدی از عنصر برای حاشیه درنظر گرفته می شود.

تنظیم حاشیه ها، به صورت جداگانه

در CSS این امکان وجود دارد که مقدار padding را برای اضلاع مختلف به صورت جداگانه تنظیم نمود:

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

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

مختصر نویسی – Padding

برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار ضلع یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت padding استفاده کنید:

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

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

می توانید مثال بالا را به صورت زیر بنویسید .

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

خصوصیت padding از یک تا چهار مقدار می تواند داشته باشد:

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

امیدواریم آموزش padding در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.