021-20483015

margin (حاشیه) در CSS

این صفت برای ایجاد فضای خالی به دور عناصر ، استفاده می شود. صفت margin اندازه فضای خارج از خط حاشیه را تعیین می کند.
با CSS می توان بطور کامل حاشیه را کنترل کرد. صفاتی هم برای تعیین حاشیه هر طرف وجود دارد (top , right , bottom , left)

 

جهت های تکی در margin

در CSS برای تعیین حاشیه هر طرف از عنصر ، صفت هایی وجود دارد :

margin-top
margin-right
margin-bottom
margin-left

همه صفت های margin می توانند مقادیر زیر را داشته باشند :

auto - خود مرورگر مقدار حاشیه را محاسبه می کند.
length - مقدار حاشیه را بر حسب px ، pt و cm مشخص می کند.
% - حاشیه را بر حسب درصدی از عرض محتوای عنصر تعیین می کند.
inherit - مشخص می کند که حاشیه و مشخصات آن باید از عنصر مورد اشاره تبعیت کند.

نکته ! امکان تعیین مقادیر منفی برای حاشیه وجود دارد.

در مثال زیر ، حاشیه هر چهار طرف عنصر <p> را متفاوت از یکدیگر تنظیم کرده ایم.

مثال :

فضای حاشیه
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
مشاهده مثال

 

صفت خلاصه شده margin

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

margin-top
margin-right
margin-bottom
margin-left

مثال :

کد خلاصه فضای حاشیه
p {
    margin: 100px 150px 100px 80px;
}
مشاهده مثال


تشریح مثال بالا :

اگر صفت margin چهار مقدار داشته باشد ;margin: 25px 50px 75px 100px

حاشیه بالا 25px
حاشیه راست 50px
حاشیه پایین 75px
حاشیه چپ 100px
خواهد بود.


اگر صفت margin سه مقدار داشته باشد ;margin: 25px 50px 75px

حاشیه بالا 25px
حاشیه راست و چپ 50px
حاشیه پایین 75px
خواهد بود.

اگر صفت margin دو مقدار داشته باشد ;margin: 25px 50px  

حاشیه بالا و پایین 25px
حاشیه راست و چپ 50px

خواهد بود.

اگر صفت margin یک مقدار داشته باشد ;margin: 25px

حاشیه هر چهار جهت 25px خواهد بود.

 

مقدار auto برای margin

علاوه بر مقادیر مشخص و معین ، می توان مقدار صفت margin را بر روی auto نیز تنظیم کرد تا بطور افقی عنصر را در وسط فضای نگه دارنده عنصر تنظیم کند.
برای اینکار باید یک مقدار برای عرض عنصر تعیین شود. سپس مقدار باقی مانده از عرض بخش نگه دارنده عنصر ، از هر دو طرف بطور یکسان به عنوان حاشیه عنصر نمایش داده خواهد شد.

مثال : 

مقدار auto برای margin
div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
مشاهده مثال

مقدار inherit برای margin

در مثال زیر مقدار حاشیه راست از حاشیه عنصر تبعیت می کند.

مثال :

مقدار inherit
div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
مشاهده مثال

 

margin collapse

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

در مثال زیر نمونه آن را مشاهده می کنید.

مثال :

margin collapse
h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}
مشاهده مثال



حاشیه پایین عنصر h1 پنجاه پیکسل و حاشیه بالای عنصر h2 بیست پیکسل می باشد. در واقع انتظار می رود که فاصله عمودی بین این دو عنصر 70 پیکسل نمایش داده شود در صورتی که با توجه به وجود margin collapse در نمایش مرورگر ، این فاصله 50 پیکسل شده است.
 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط