حاشيه به دور عناصر :
با استفاده از خاصيت 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 > |
کد | ||
|
خروجی | ||
| به صورت خاصيت تک مقداری | |||
| < 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 > |
کد | ||
|
خروجی | ||
منبع: دنیای فناوری با حساس کامپیوتر
