این صفت برای ایجاد فضای خالی به دور عناصر ، استفاده می شود. صفت 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;
}

مقدار auto برای margin

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

مثال : 

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

مقدار inherit برای margin

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

مثال :

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

margin collapse

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

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

مثال :

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}