CSS – پدینگ (Padding)

پدینگ (Padding) در CSS برای ایجاد فضای داخلی بین محتوای یک عنصر و حاشیه آن استفاده می‌شود.

خواص مربوط به پدینگ برای هر طرف:

  • padding-top: برای تعیین فاصله داخلی از بالای عنصر.
  • padding-right: برای تعیین فاصله داخلی از سمت راست عنصر.
  • padding-bottom: برای تعیین فاصله داخلی از پایین عنصر.
  • padding-left: برای تعیین فاصله داخلی از سمت چپ عنصر.

مقادیر قابل استفاده:

  • طول (length): به صورت واحدهایی مانند px، pt، cm، و غیره تعریف می‌شود.
  • درصد (%): درصدی از عرض عنصر والد.
  • inherit: مقدار پدینگ از عنصر والد به ارث می‌رسد.

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

مثال:

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

خاصیت میان‌بر پدینگ

برای ساده‌سازی کد، می‌توانید از خاصیت میان‌بر padding استفاده کنید:

  • چهار مقدار: padding: 25px 50px 75px 100px;

    • پدینگ بالا: 25px
    • پدینگ راست: 50px
    • پدینگ پایین: 75px
    • پدینگ چپ: 100px
  • سه مقدار: padding: 25px 50px 75px;

    • پدینگ بالا: 25px
    • پدینگ راست و چپ: 50px
    • پدینگ پایین: 75px
  • دو مقدار: padding: 25px 50px;

    • پدینگ بالا و پایین: 25px
    • پدینگ راست و چپ: 50px
  • یک مقدار: padding: 25px;

    • تمامی طرفین 25px پدینگ دارند.

مثال استفاده از مقدار میان‌بر:

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

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

وقتی عرض یک عنصر تنظیم شده باشد و پدینگ به آن افزوده شود، عرض کلی آن افزایش می‌یابد. برای حفظ عرض ثابت می‌توانید از خاصیت box-sizing: border-box; استفاده کنید.

مثال:

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

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.