خواص مقدماتی 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 >
|
|
|
< 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 >
|
|
|