آموزش حاشیه بیرونی، margin در CSS

از مارجین ها(Margin) برای ایجاد فضا به دور عناصر، بیرون از هر کادرِ(border) تعریف شده ای، استفاده می شود:

div {
  margin: 70px;
  border: 1px solid #4CAF50;
}

مارجین ها در CSS

از ویژگی های margin برای ایجاد فضا یا فاصله به دور عناصر، بیرون از هر کادرِ(border) تعریف شده ای، استفاده می شود.

ما با استفاده از CSS، کنترل کاملی روی مارجین ها داریم. در مارجین ها، برای هر سمت از عنصر، ویژگی های مخصوصی(top و right و bottom و left) وجود داد.

ویژگی های مخصوص مارجین ها

در CSS، ویژگی های مخصوصی برای ایجاد مارجین برای هر سمت از یک عنصر وجود دارد:

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

تمام ویژگی های مارجین، می توانند مقادیر زیر را داشته باشند:

• auto : با استفاده از این مقدار، مرورگر مارجین را محاسبه خواهد کرد.
• طول : یک مارجین می تواند طولی به واحد های px یا pt یا cm یا غیره داشته باشد.
• % : یک مارجین می تواند برابر با درصدی از عرض(width) عنصری که در داخل آن قرار دارد، باشد.
• 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; 

1. مارجین top برابر با 25px است.
2. مارجین right برابر با 50px است.
3. مارجین bottom برابر با 75px است.
4. مارجین left برابر با 100px است.

p {
  margin: 25px 50px 75px 100px;
}

فرض کنید بخواهیم ویژگی margin سه مقدار داشته باشد:

margin: 25px 50px 75px;

1. مارجین top برابر با 25px است.
2. مارجین right و left برابر با 50px است.
3. مارجین bottom برابر با 75px است.

p {
  margin: 25px 50px 75px;
}

 فرض کنید بخواهیم ویژگی margin  دو مقدار داشته باشد:

margin: 25px 50px;

1. مارجین top و مارجین bottom برابر با 25px است.
2. مارجین right و مارجین left برابر با 50px است.

p {
  margin: 25px 50px;
}

فرض کنید بخواهیم ویژگی margin یک مقدار داشته باشد:

margin: 25px;

1. هر چهار مارجین برابر با 25px هستند.

p {
  margin: 25px;
}

بررسی مقدار auto برای مارجین در CSS

اگر مقدار ویژگی margin را برابر با auto قرار دهیم، این عنصر به صورت افقی(horizontally)در وسط(center) عنصر دربردارنده ی خود قرار می گیرد. و فاصله از سمت چپ و راست نصف می شود.

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

استفاده از مقدار inherit

در مثال زیر، مقدار مارجین سمت چپ از عنصر <p class="ex1"> از عنصر والد خود (<div>) به ارث برده می شود:

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

p.ex1 {
  margin-left: inherit;
}

تمام ویژگی های margin در CSS