Margin ها در زبان CSS

Margin چیست؟

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

در زبان CSS برای تعیین margin دستتان باز است و می توانید آن را از چهار طرف به صورت جداگانه تعیین کنید:

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

مقادیر قابل قبول برای margin ها عبارت اند از:

auto: اگر این مقدار را به margin بدهید، خود مرورگر مقدارش را تعیین می کند.
واحد طول: در این حالت باید مقدار margin را در یکی از واحد های طول پذیرفته شده مانند px یا pt یا cm و ... تعیین کنید.
درصد: در این حالت margin بر اساس درصدی از عرض عنصر تعیین می شود.
inherit: در لغت به معنی «به ارث بردن» است. در این حالت margin مقدار خود را از عنصر پدرش به ارث می برد.

نکته: مقادیر منفی نیز مجاز هستند! مقادیر منفی به جای ایجاد فضای خالی، آن را کم می کنند و عناصر را به هم نزدیک تر می نمایند.

در مثال زیر برای عنصر div از هر چهار طرف margin تعیین کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div dir='rtl'>این عنصر div دارای margin بالای 100 پیکسل و سپس margin راست 150 پیکسل و margin پایین 100 پیکسل و margin چپ 80 پیکسل می باشد.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور خلاصه شده margin

تا اینجای کار فهمیدیم که margin را می توان از چهار سمت تعریف کرد:

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

اما برای راحتی کار شما شکل خلاصه شده ای از این 4 دستور وجود داشته و از این قرار است:

دستور margin برای مقادیر چهار تایی به صورت ;margin: 25px 50px 75px 100px :

margin بالای عنصر 25px
margin راست عنصر 50px
margin پایین عنصر 75px
margin چپ عنصر 100px

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

  <div dir='rtl'>این عنصر div دارای margin بالای 25 پیکسل و سپس margin راست 50 پیکسل و margin پایین 75 پیکسل و margin چپ 100 پیکسل می باشد.</div>

  
<hr>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور margin برای مقادیر سه تایی به صورت ;margin: 25px 50px 75px :

margin بالای عنصر 25px
margin راست و چپ عنصر 50px
margin پایین عنصر 75px

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>


<div dir='rtl'>این عنصر div دارای margin بالای 25 پیکسل و سپس margin راست 50 پیکسل و margin پایین 75 پیکسل و margin چپ 50 پیکسل می باشد.</div>

<hr>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور margin برای مقادیر دو تایی به صورت ;margin: 25px 50px :

margin بالا و پایین عنصر 25px
margin راست و چپ عنصر 50px

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div dir='rtl'>این عنصر div دارای margin بالای 25 پیکسل و سپس margin راست 50 پیکسل و margin پایین 25 پیکسل و margin چپ 50 پیکسل می باشد.</div>

<hr>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور margin برای مقادیر تکی به صورت ;margin: 25px:

margin بالا و پایین و چپ و راست عنصر 25px

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>


<div dir='rtl'>
  این div از هر چهار طرف دارای margin معادل 25 پیکسل است.
</div>

<hr>

</body>
</html>

مشاهده ی خروجی در JSBin

مقادیر auto و inherit

اگر از مقدار auto استفاده کنید مرورگر عنصر مورد نظر را (در محور افقی) وسط عنصر پدرش می گذارد. به عبارت دیگر auto ابتدا عرض عنصر یا width را می گیرد و سپس هر چقدر فضا باقی ماند بین قسمت چپ و راست تقسیم می شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin:auto</h2>
<p dir='rtl'> auto ابتدا عرض عنصر یا width را می گیرد و سپس هر چقدر فضا باقی ماند بین قسمت چپ و راست تقسیم می کند.</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<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>

مشاهده ی خروجی در JSBin

می بینید که عنصر ما margin خود را از پدرش، یعنی div، گرفته است.

خطای فروریختگی margin

برخی اوقات، margin بالا و پایین عناصر در هم فرو می ریزند. در این حالت margin بین آن ها تنها به اندازه ی بزرگترین margin یکی از دو عنصر خواهد بود. این مسئله برای margin های راست و چپ اتفاق نمی افتد بلکه تنها برای margin های بالا و پایین صادق است. به طور مثال در کد زیر h1 دارای margin تحتانی 50 پیکسل و h2 دارای margin فوقانی 20 پیکسل است. بنابراین فاصله ی عمودی بین h1 و h2 باید 70 پیکسل باشد (50px + 20px) اما margin ها روی هم می افتند و فاصله ی بینشان 50 پیکسل (مقدار margin بزرگتر) می شود:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p dir='rtl'> در کد زیر h1 دارای margin تحتانی 50 پیکسل و h2 دارای margin فوقانی 20 پیکسل است. بنابراین فاصله ی عمودی بین h1 و h2 باید 70 پیکسل باشد (50px + 20px) اما margin ها روی هم می افتند و فاصله ی بینشان 50 پیکسل (مقدار margin بزرگتر) می شود</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

</body>
</html>

مشاهده ی خروجی در JSBin

باید همیشه مراقب این اتفاق در HTML و CSS باشید و محاسبات خود را بر اساس آن انجام دهید. گرچه در قسمت های آینده توضیحات بیشتری در مورد این نوع خطاها به شما می دهیم.

امیدوارم از این قسمت استفاده ی کافی را برده باشید.