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;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

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