margin در css

margin در css به فضایی در اطراف المان گفته می شود که بیرون از هرگونه border تعیین شده برای المان اعمال می شود.

در سی اس اس شما قادر هستید به راحتی برای هر جهتی از المان، margin جداگانه ای اختصاص دهید: بالا، راست، پایین و چپ.

margin جداگانه

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

خصوصیت margin می تواند مقادیر زیر را بگیرد:

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

نکته: به margin در css ، مقادیر منفی نیز می توان داد.

در مثال زیر مقادیر متفاوتی به مارجین داده ایم:

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

مختصر نویسی margin در css

در این حالت می توانیم تمامی مارجین های چهار طرف را در یک خط کد اعمال کرد که ترتیب آن ها به صورت زیر است:

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

که یکی از حالت های زیر را خواهیم داشت:
۱) اگر مارجین چهار مقدار داشته باشد:

margin: 25px 50px 75px 100px;

margin بالا: ۲۵ پیکسل
margin راست: ۵۰ پیکسل
margin پایین: ۷۵ پیکسل
margin چپ: ۱۰۰ پیکسل

۲) اگر مارجین سه مقدار داشته باشد:

margin: 25px 50px 75px;

margin بالا: ۲۵ پیکسل
margin راست: ۵۰ پیکسل
margin پایین: ۷۵ پیکسل

۳) اگر مارجین دو مقدار داشته باشد:

margin: 25px 50px;

margin بالا و پایین: ۲۵ پیکسل
margin راست و چپ: ۵۰ پیکسل

۴) اگر مارجین یک مقدار داشته باشد:

margin: 25px;

در تمامی جهات margin برابر ۲۵ پیکسل خواهیم داشت.

auto

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

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

inherit

در مثال زیر المان P با کلاس ex1، مارجین چپ را از المان div به ارث می برد:

<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>

Margin Collapse

هرگاه دو المان پشت سر هم داشته باشیم که المان بالایی margin پایین داشته باشد و المان پایینی margin بالا، در اینصورت margin مابین این دو المان به اندازه ماکزیمم اندازه دو مارجین می شود.
نکته: این قضیه فقط برای margin بالا و پایین اتفاق می افتد و در مورد مارجین چپ و راست صدق نمی کند.
به مثال زیر دقت کنید:

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

در این مثال المان h1 مارجین پایین برابر با ۵۰ پیکسل دارد و المان h2 مارجین بالا برابر با ۲۰ پیکسل، در حالت معمولی انتظار می رود margin بین این دو المان مجموع ۵۰ و ۲۰ شود و مساوی ۷۰ باشد. اما این اتفاق نمی افتد و ماکزیمم دو مقدار ۵۰ و ۲۰، به عنوان مارجین بین این دو المان منظور می شود؛ یعنی مقدار مارجین برابر ۵۰ پیکسل می شود.

برگرفته از وب سایت w3schools