٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش CSS Padding

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

محمد یوسفی

8 جولای 2021

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

CSS Padding

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

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


بالشتک – طرفین فردی

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

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

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

  • length – یک padding در px ، pt ، cm و غیره را مشخص می کند.
  • ٪ – یک پر کردن در٪ عرض عنصر حاوی را مشخص می کند
  • Heritage – مشخص می کند که padding باید از عنصر والد به ارث برسد

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

مثال

برای چهار طرف یک عنصر <div> padding مختلف تنظیم کنید:

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

بالشتک – املاک مختصر

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

این paddingویژگی یک ویژگی مختصر برای خصوصیات بالشتک زیر است:

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

بنابراین ، نحوه کار آن در اینجا است:

اگر paddingویژگی چهار مقدار داشته باشد:

  • بالشتک: 25px 50px 75px 100px؛
    • بالشتک بالا 25 پیکسل است
    • بالشتک سمت راست 50 پیکسل است
    • بالشتک پایین 75px است
    • بالشتک سمت چپ 100 پیکسل است

مثال

از ویژگی اصطلاحات padding با چهار مقدار استفاده کنید:

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

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

  • بالشتک: 25px 50px 75px؛
    • بالشتک بالا 25 پیکسل است
    • بالشتک های راست و چپ 50 پیکسل هستند
    • بالشتک پایین 75px است

مثال

از ویژگی اصطلاحات padding با سه مقدار استفاده کنید:

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

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

  • بالشتک: 25px 50px؛
    • بالشتک های بالا و پایین 25 پیکسل هستند
    • بالشتک های راست و چپ 50 پیکسل هستند

مثال

از ویژگی اصطلاحات padding با دو مقدار استفاده کنید:

div {
  padding: 25px 50px;
}

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

  • بالشتک: 25px؛
    • هر چهار بالشتک 25 پیکسل است

مثال

از ویژگی اصطلاحات padding با یک مقدار استفاده کنید:

div {
  padding: 25px;
}

بالشتک و عرض عنصر

widthویژگی CSS عرض ناحیه محتوای عنصر را مشخص می کند. ناحیه محتوا بخشی از داخل بالشتک ، حاشیه و حاشیه یک عنصر است ( مدل جعبه ).

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

مثال

در اینجا به عنصر <div> عرض 300 پیکسل داده می شود. با این حال ، عرض واقعی عنصر <div> 350px خواهد بود (300px + 25px بالشتک سمت چپ + 25px بالشتک سمت راست):

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

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

مثال

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

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

منبع

 

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها