قدم قبلی >< قدم بعدی

 

CSS Padding

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

با استفاده از CSS، شما کنترل کاملی بر روی Padding خواهید داشت، شما امکان تنظیم خصوصیات هر طرف یک عنصر را خواهید داشت (بالا، راست، پایین و چپ) .

Padding – کناره های تکی

CSS دارای خصوصیاتی برای تعیین پدینگ برای هر طرف یک عنصر است.

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

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

length(طول)- طول را در قالب  px، pt، cm و غیره مشخص می کند.
٪ – طول را در قالب ٪ (درصد) طول عنصر مشخص می کند.
inherit(ارث بردن)- مشخص می کند که پدینگ باید طول را از والد عنصر بگیرد.

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

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

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

 

 

 

Padding-خلاصه نویسی کدها 

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

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

در اینجا خواهید دید که چگونه خصوصیات padding به یک خصوصیت مختصر شده در زیر تبدیل می شوند:

مثال:

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

padding: 25px 50px 75px 100px;

.پدینگ بالا ۲۵ پیکسل است
.پدینگ راست ۵۰ پیکسل است
.پدینگ پایین ۷۵ پیکسل است
.پدینگ چپ ۱۰۰ پیکسل است

 

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

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

padding: 25px 50px 75px;

پدینگ بالا ۲۵ پیکسل است
پدینگ راست و چپ ۵۰ پیکسل است
پدینگ پایین ۷۵ پیکسل است

 

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

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

padding: 25px 50px;

پدینگ بالا و پایین ۲۵px هستند
پدینگ راست و چپ ۵۰ پیکسل است

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

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

padding: 25px؛
تمام چهار پرده ۲۵ پیکسل است

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

 

 

Padding و عرض عنصر

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

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

در مثال زیر، عنصر <div> دارای عرض ۳۰۰ پیکسل می باشد. با این حال، پهنای واقعی ارائه شده برای عنصر ۳۵۰ پیکسل  (۳۰۰ پیکسل+۲۵ پیکسل پدینگ راست+۲۵پیکسل پدینگ چپ) خواهد بود:

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

در اینجا برای حفظ عرض عنصر<div> در ۳۰۰پیکسل، بدون توجه به مقدار padding، شما می توانید از ویژگی box-sizing استفاده کنید. این باعث می شود که اگر پدینگ را افزایش دهید، باز هم عنصر مورد نظر بتواند عرض خود را با افزایش فضای محتوای موجود، حفظ کند. به این مثال توجه کنید:

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

 

 

 

گام قبلی >< گام بعدی