آموزش CSS | قسمت دهم ( پدینگ CSS )

تاریخ: شنبه, 05 مهر 1399

---

---

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

خوشحال میشیم ما رو تا آخر این مطلب همراهی کنید .

 

 

---

پدینگ ها در CSS

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

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

 

---

پدینگ - حاشیه های مجزا

 

CSS ویژگی هایی را برای تعیین حاشیه گذاری برای هر طرف یک عنصر دارد :

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

 

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

• length - یک padding با مقادیر px ، pt ، cm و غیره را مشخص می کند .
• ٪ - بر اساس عنصر پدر خود درصدی را میتوانید برای انتخاب پدینگ در نظر بگیرید .
• inherit - مشخص می کند که padding باید از عنصر والد به ارث برسد .

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

 

مثال :

برای چهار طرف یک عنصر div پدینگ های مختلف تعربف میکنیم :

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

تست کنید

 

---

پدینگ - مختصر نویسی

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

 

 

خاصیت padding با چهار مقدار :

• padding: 25px 50px 75px 100px;

• پدینگ بالا 25 پیکسل .
• پدینگ راست 50 پیکسل . 
• پدینگ پایین 75 پیکسل . 
• پدینگ چپ 100 پیکسل . 

مثال :

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

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

تست کنید

 

 

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

• padding: 25px 50px 75px;

• پدینگ بالا 25 پیکسل .
• پدینگ راست و چپ 50 پیکسل . 
• پدینگ پایین 25 پیکسل . 

مثال :

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

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

تست کنید

 

 

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

padding: 25px 50px;

• پدینگ بالا و پایین 25 پیکسل .
• پدینگ راست و چپ 50 پیکسل . 

مثال :

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

div {
  padding: 25px 50px;
}

تست کنید

 

 

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

padding: 25px;

• پدینگ 25 پیکسل برای هر طرف .

مثال :

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

div {
  padding: 25px;
}

تست کنید

 

---

پدینگ و عرض عنصر

ویژگی CSS width عرض ناحیه محتوای عنصر را مشخص می کند .

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

مثال :

در اینجا به عنصر <div> عرض 300 پیکسل داده می شود. با این حال ، عرض واقعی عنصر 350 پیکسل خواهد بود

( پدینگ راست 25 + عرض 300 + پدینگ چپ 25 ) :

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

تست کنید

 

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

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

 

مثال :

از ویژگی اندازه جعبه برای نگه داشتن عرض در 300 پیکسل استفاده کنید ، مهم نیست که چه مقدار پدینگ دارد :

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

تست کنید

 

ممنون که مارو تا آخر این مطلب همراهی کردید ؛ امیدوارم این مطلب برای شما مفید بوده باشه ، خوشحال میشیم اگه انقاد و سوالی دارید در قسمت نظرات در زیر این پست برای ما انتشار بدید . موفق باشید .

---

---