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

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

ورود به سیستم

سایر مطالب

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

نماد اعتماد

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

مطالب هم شاخه

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

خدمات

گزارشات

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

بازدید دیروز: 0
بازدید کننده دیروز: 0
بازدید امروز: 380
بازدید کننده امروز: 194
بازدید کل تا به امروز: 1905310

GPS آنلاین

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

تبلیغات

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

تبلیغات

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

تبلیغات

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

تبلیغات

تبلیغات

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

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

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

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

با استفاده از خاصيت margin در CSS ، می توان فضای خالی به دور عناصر ايجاد کرد . اين امکان نيز وجود دارد که با تعيين مقدارهای منفی ، باعث هم پوشانی و تداخل عناصر در يکديگر شد .
می توان حاشيه دور عناصر را به صورت کلی در خاصيت چند مقداری margin و يا به صورت تکی برای هر يک از جهات 4 گانه عنصر تعيين کرد .

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

در خاصيت چند مقداری ، 4 مقدار برای ميزان حاشيه در 4 طرف عنصر به ترتيب زير تعيين می کنيم :

margin: [ margin top ] [ margin right ] [ margin bottom ] [ margin left ]

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

margin : 10px 20px 10px 20px

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

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

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

 

مثال : در مثال زير هم به صورت خاصيت چند مقداری و هم به صورت خاصيت تک مقداری margin برای جدول ( Table 2 ) تعيين کرده ايم . به فاصله آن با جدول ديگر و همچنين خطوط حاشيه جدول اصلی در بر گيرنده مثال دقت کنيد :

به صورت خاصيت چند مقداری
< table style="border: solid 2px blue; width: 200px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; width: 300px; margin: 50px 30px 50px 30px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >
کد
Cell 1 , Table 1
Cell 1 , Table 2
خروجی
به صورت خاصيت تک مقداری
< table style="border: solid 2px blue; width: 200px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; width: 300px; margin-top: 50px; margin-right: 30px; margin-bottom: 50px; margin-left: 30px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >
کد
Cell 1 , Table 1
Cell 1 , Table 2
خروجی
تعيين به صورت مقدار منفی ( هم پوشانی و تداخل عناصر )
< table style="border: solid 2px blue; width: 200px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >

< table style="border: solid 2px blue; width: 300px; margin-top: -15px; margin-right: 30px; margin-bottom: -10px; margin-left: 30px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >
کد
Cell 1 , Table 1
Cell 1 , Table 2
خروجی


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