| قدم قبلی > | < قدم بعدی |
CSS Padding
خصوصیات CSS padding برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز یا border تعریف شده استفاده می شود.
با استفاده از CSS، شما کنترل کاملی بر روی Padding خواهید داشت، شما امکان تنظیم خصوصیات هر طرف یک عنصر را خواهید داشت (بالا، راست، پایین و چپ) .
Padding – کناره های تکی
CSS دارای خصوصیاتی برای تعیین پدینگ برای هر طرف یک عنصر است.
- padding-top
- padding-right
- padding-bottom
- padding-left
مقادیر زیر را می توان به تمام خصوصیات padding اختصاص داد:
length(طول)- طول را در قالب px، pt، cm و غیره مشخص می کند.
٪ – طول را در قالب ٪ (درصد) طول عنصر مشخص می کند.
inherit(ارث بردن)- مشخص می کند که پدینگ باید طول را از والد عنصر بگیرد.
توجه: مقادیر منفی مجاز نیستند.
مثال زیر پدینگ های مختلف را برای هر چهار طرف یک عنصر <div> تنظیم می کند:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ | <html> <head> <style> div { border: ۱px solid black; background-color: lightblue; padding-top: ۵۰px; padding-right: ۳۰px; padding-bottom: ۵۰px; padding-left: ۸۰px; } </style> </head> <body> <h2>Using individual padding properties</h2> <div>این عنصر دارای پدینگ بالای ۵۰ پیکسل، پهنای راست ۳۰ پیکسل، پهنای باند پایین از ۵۰ پیکسل و پهپاد سمت چپ ۸۰ پیکسل است..</div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
Padding-خلاصه نویسی کدها
برای کوتاه کردن کد، می توان تمام خصوصیات padding را در یک ویژگی مشخص کرد.
- padding-top
- padding-right
- padding-bottom
- padding-left
در اینجا خواهید دید که چگونه خصوصیات padding به یک خصوصیت مختصر شده در زیر تبدیل می شوند:
مثال:
اگر خصوصیات padding دارای چهار مقدار برای چهار طرف باشند همه را به ترتیب زیر در یک خط می نویسیم:
padding: 25px 50px 75px 100px;
.پدینگ بالا ۲۵ پیکسل است
.پدینگ راست ۵۰ پیکسل است
.پدینگ پایین ۷۵ پیکسل است
.پدینگ چپ ۱۰۰ پیکسل است
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> div { border: ۱px solid black; padding: ۲۵px ۵۰px ۷۵px ۱۰۰px; background-color: lightblue; } </style> </head> <body> <h2>The padding shorthand property - ۴ values</h2> <div>این عنصر دارای پدینگ بالای ۲۵ پیکسل، پدینگ راست ۵۰ پیکسل، پدینگ پایین ۷۵ پیکسل و پدینگ چپ ۱۰۰ پیکسل است.</div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
مثال:
و اگر خصوصیات padding دارای سه مقدار باشد خواهیم داشت:
padding: 25px 50px 75px;
پدینگ بالا ۲۵ پیکسل است
پدینگ راست و چپ ۵۰ پیکسل است
پدینگ پایین ۷۵ پیکسل است
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> div { border: ۱px solid black; padding: ۲۵px ۵۰px ۷۵px; background-color: lightblue; } </style> </head> <body> <h2>The padding shorthand property - ۳ values</h2> <div>این عنصر دارای پدینگ بالای ۲۵پیکسل، پدینگ راست و چپ ۵۰ پیکسل و پدینگ پایین ۷۵ پیکسل است.</div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
مثال:
و اگر خصوصیات padding دارای دو مقدار برای چهار طرف باشند همه را به ترتیب زیر در یک خط می نویسیم:
padding: 25px 50px;
پدینگ بالا و پایین ۲۵px هستند
پدینگ راست و چپ ۵۰ پیکسل است
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> div { border: ۱px solid black; padding: ۲۵px ۵۰px; background-color: lightblue; } </style> </head> <body> <h2>The padding shorthand property - ۲ values</h2> <div>این عنصر دارای پدینگ بالا و پایین ۲۵پیکسل و پدینگ راست و چپ ۵۰ پیکسل است.</div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
مثال:
و اگر خصوصیات padding دارای یک مقدار باشد خواهیم داشت:
padding: 25px؛
تمام چهار پرده ۲۵ پیکسل است
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> div { border: ۱px solid black; padding: ۲۵px; background-color: lightblue; } </style> </head> <body> <h2>The padding shorthand property - ۱ value</h2> <div>این عنصر دارای پدینگ بالا و پایین و چپ و راست ۲۵پیکسل است.</div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
Padding و عرض عنصر
ویژگی عرض CSS ،عرض محدوده محتوی عنصر را مشخص می کند. محدوده محتوا بخشی در داخل محفظه، مرز و حاشیه عنصر (مدل جعبه) است.
بنابراین، اگر یک عنصر دارای عرض مشخص شده باشد، ابعاد پدینگ اضافه شده به آن عنصر به عرض کل عنصر افزوده می شود. این اغلب یک نتیجه نامطلوب به بار می آورد.
در مثال زیر، عنصر <div> دارای عرض ۳۰۰ پیکسل می باشد. با این حال، پهنای واقعی ارائه شده برای عنصر ۳۵۰ پیکسل (۳۰۰ پیکسل+۲۵ پیکسل پدینگ راست+۲۵پیکسل پدینگ چپ) خواهد بود:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ | <html> <head> <style> div.ex1 { width: ۳۰۰px; background-color: yellow; } div.ex2 { width: ۳۰۰px; padding: ۲۵px; background-color: lightblue; } </style> </head> <body> <h2>Padding and element width</h2> <div class="ex1">This div is ۳۰۰px wide.</div> <br> <div class="ex2">The width of this div is ۳۵۰px, even though it is defined as ۳۰۰px in the CSS.</div> </body> </html> |
در اینجا برای حفظ عرض عنصر<div> در ۳۰۰پیکسل، بدون توجه به مقدار padding، شما می توانید از ویژگی box-sizing استفاده کنید. این باعث می شود که اگر پدینگ را افزایش دهید، باز هم عنصر مورد نظر بتواند عرض خود را با افزایش فضای محتوای موجود، حفظ کند. به این مثال توجه کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ | <html> <head> <style> div.ex1 { width: ۳۰۰px; background-color: yellow; } div.ex2 { width: ۳۰۰px; padding: ۲۵px; box-sizing: border-box; background-color: lightblue; } </style> </head> <body> <h2>Padding and element width</h2> <div class="ex1">This div is ۳۰۰px wide.</div> <br> <div class="ex2">The width of this div remains at ۳۰۰px, in spite of the ۵۰px of total left and right padding, because of the box-sizing: border-box property. </div> </body> </html> |
با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.