آموزش برنامه نویسی

موضوعات آموزش

ورود به سیستم

سایر مطالب

رادیو موزیک آنلاین

نماد اعتماد

جذابترین های این بخش

مطالب هم شاخه

آیا میدانستید؟

خدمات

گزارشات

سیستم عامل: Unknown OS Platform
مرورگر شما: Unknown Browser
کشور شما: United States
موقعیت شما: 54.205.153.63

بازدید دیروز: 3490
بازدید کننده دیروز: 1703
بازدید امروز: 2705
بازدید کننده امروز: 1377
بازدید کل تا به امروز: 1256151

GPS آنلاین

مسیر یاب آنلاین آسان

تبلیغات

دانلود دفترچه راهنمای مدار سیم کشی برق موتورسیکلت

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت آپاچی 180 و آپاچی 160

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت تریل سوزوکی

تبلیغات

تبلیغات

دانلود دفترچه راهنمای سرویس و نگهداری موتورسیکلت هندا

آموزش > آموزش برنامه نویسی >  آموزش CSS > 

آموزش CSS - خواص مقدماتی ( حاشيه درونی عناصر CSS )

حاشيه درونی عناصر :

با استفاده از خاصيت padding در CSS ، می توان فاصله بين خطوط حاشيه دور يک عنصر را با محتويات درونی آن تنظيم کرد . برای مثال فاصله بين خطوط حاشيه يک خانه جدول با متن درون آن را با استفاده از خاصيت padding تنظيم می کنيم .
نکته : در خاصيت padding استفاده از مقادير منفی مجاز نيست .

فاصله درونی عناصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود ، که می توان با استفاده از خاصيت چند مقداری padding آن را برای تمام جهات تنظيم کرده و يا به صورت خاصيت تک مقداری ، ميزان فاصله را در هر جهت به صورت مجزا تعيين کرد .
مجموعه خواص padding شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت روی نام آن کليک کنيد :

padding
padding-top
padding-right
paddnig-bottom
padding-left

 

1 ) تعيين با استفاده از خاصيت چند مقداری padding :

توسط خاصيت padding طبق الگوی زير ، ميزان فاصله را برای تمام جهات تنظيم می کنيم :

padding : [ padding top ] [ padding right ] [ padding bottom ] [ padding left ]

مثال : در مثال زير ميزان فاصله درونی را برای جهت های بالا و پايين 10px و برای جهت های راست و چپ 20px تعيين کرده ايم :

padding : 10px 20px 10px 20px

2 ) تعيين به صورت خاصيت تک مقداری :

در اين حالت ، ميزان فاصله را برای هر يک از جهات به صورت جدا مقدار دهی می کنيم . مجموعه خواص زير برای تعيين تکی فاصله درونی به کار می رود :

نام خاصيت نوع خاصيت شرح
padding-top length
درصد %
ميزان فاصله درونی را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-right length
درصد %
ميزان فاصله درونی را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-bottom length
درصد %
ميزان فاصله درونی را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-left length
درصد %
ميزان فاصله درونی را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم .

 

مثال : در مثال زير هم به صورت خاصيت چند مقداری و هم به صورت خاصيت تک مقداری padding برای جدول مثال تعيين کرده ايم . به فاصله محتويات خانه های جدول با خطوط حاشيه آنها  مثال دقت کنيد :
نکته مهم : در جدول مثال ، برای خانه Cell 3 فاصله درونی تعريف نکرده ايم ،   ولی برای خانه های cell 1 و Cell 2 در درون تگ td آنها ، padding را تعيين کرده ايم .

به صورت خاصيت چند مقداری
< table style="border: solid 2px blue" cellspacing="0" >
  < tr >

    < td style="border: solid 2px green; padding: 2px 10px 2px 10px; width: 200px" >
      Cell 1 Cell 1 Cell 1
      Cell 1 Cell 1 Cell 1
      Cell 1 Cell 1 Cell 1
    < /td >

    < td style="border: dashed 2px blue; padding: 10px 20px 30px 40px; width: 200px" >
      Cell 2 Cell 2 Cell 2
      Cell 2 Cell 2 Cell 2
    < /td >

    < td style="border: solid 2px red; width: 200px" >
      Cell 3 Cell 3 Cell 3 Cell 3
      Cell 3 Cell 3 Cell 3 Cell 3
      Cell 3 Cell 3 Cell 3 Cell 3
    < /td >

  < /tr >
< /table >
کد
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
خروجی
به صورت خاصيت تک مقداری
< table style="border: solid 2px blue" cellspacing="0" >
  < tr >
    
< td style="border: solid 2px green; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; width: 200px" >
      Cell 1 Cell 1 Cell 1
      Cell 1 Cell 1 Cell 1
      Cell 1 Cell 1 Cell 1
    < /td >

    < td style="border: dashed 2px blue; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-bottom: 40px; width: 200px" >
      Cell 2 Cell 2 Cell 2
      Cell 2 Cell 2 Cell 2
    < /td >

    < td style="border: solid 2px red; width: 200px" >
      Cell 3 Cell 3 Cell 3 Cell 3
      Cell 3 Cell 3 Cell 3 Cell 3
      Cell 3 Cell 3 Cell 3 Cell 3
    < /td >

  < /tr >
< /table >
کد
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
خروجی


نام: 8110
ایمیل:
سایت: