قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / حاشیه دور عناصر css

حاشیه دور عناصر css

حاشیه دور عناصر cssReviewed by سالار on Mar 29Rating: 5.0

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

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

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

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

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

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

margin : 10px 20px 10px 20px

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

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

نام خاصيت نوع خاصيت شرح
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
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید