پراپرتی margin برای ایجاد فضا یا حاشیه در اطراف المانها استفاده میشود. این حاشیه خارج از بوردرهای تعریف شده اطراف آن المان است.

با سی اس اس شما کنترل کاملی بر روی این حاشیه ها دارید. برای ایجاد حاشیه در اطراف هر سمت از المان پراپرتی وجود دارد.

Margin - برای هر سمت

برای ایجاد حاشیه در اطراف هر سمت از المان پراپرتی وجود دارد.

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

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

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

نکاتی که باید در ذهن داشته باشید

مقادیر منفی هم قابل قبول میباشد.

مثال

 
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
 

Margin

میتوان کدهای حاشیه را کوتاه کرد و تمامی پراپرتی های حاشیه را داخل یک پراپرتی آورد.

پراپرتی کوتاه شده حاشیهmargin نام دارد.

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

اگر پراپرتی 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 میباشد

یکی شدن margin

در برخی موارد حاشیه بالایی و پایینی المان ها با هم یکی میشود و تنها مقداری که بیشتر است محاسبه میشود.

این اتفاق درباره حاشیه های سمت چپ و راست اتفاق نمی افتد.

مثال

 
h1 {
    margin: 0 0 50px 0;
}
h2 {
    margin: 20px 0 0 0;;
}
 

Heading 1

Heading 2