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

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

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

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

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

margin : 10px 20px 10px 20px

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

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

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

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

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

margin-left:میزان حاشیه را در طرف چپ عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– 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 >

 

 < 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 > 

 

 

 < 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 >