پدینگ (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;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام