CSS

جلسه6: خاصیت margin در css

خواندن این مطلب 4 دقیقه زمان میبرد

خاصیت margin در CSS برای ایجاد فضای خالی در اطراف عناصر، کاربرد دارد.

از خاصیت margin می توانید به همه ی جهات عنصر خود فضای خالی بدهید. شما هم چنین می توانید با استفاده از خواص زیر، به هر جهت که مد نظر شما هست فضای خالی اعمال کنید.

خواص مورد استفاده برای اعمال فضای خالی در جهات مختلف عناصر:

margin-top: اعمال فضای خالی در بالای عنصر
margin-right: اعمال فضای خالی در سمت راست عنصر
margin-bottom: اعمال فضای خالی در پایین عنصر
margin-left: اعمال فضای خالی در سمت چپ عنصر

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

auto – مرورگر به صورت خودکار فضا را تنظیم می کند.
length – فضای خالی بر اساس مقادیر cm, pt, px و غیره تنظیم می شود.
درصد(%) – تغییر اندازه فضای خالی، نسبت به اندازه ی صفحه نمایش به اندازه درصد خواهد بود.
inherit – میزان فضای خالی را از عنصر پدر خود به ارث می برد.

نکته: در خاصیت margin میتوان از مقادیر منفی نیز استفاده کرد.

مثال زیر حاوی margin های مختلف برای هر چهار جهت عنصر <p> است:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid #4CAF50;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p>این عنصر دارای خاصیت margin با مقادیر margin-top: 100px, margin-bootom: 100px, margin-right: 100px, margin-left: 80px است.
</p>
</div></div>

</body>
</html>

همانطور که در مثال زیر می بینید عنصر <p> یا پاراگراف دارای 100 پیکسل فضای خالی از بالا، 100 پیکسل فضای خالی از پایین، 80 پیکسل فضای خالی از سمت چپ و 100 پیکسل فضای خالی از سمت راست است.

این عنصر دارای خاصیت margin با مقادیر margin-top: 100px, margin-bootom: 100px, margin-right: 100px, margin-left: 80px است.

margin کوتاه یا مختصر

برای کوتاه کردن دستورات می توان تمام خصوصیات margin را در یک ویژگی مشخص کرد.

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

خاصیت margin با 4 مقدار

margin: 25px 50px 75px 100px;

مقدار 1- 25px پیکسل فضای خالی در جهت بالای عنصر اعمال می کند.
مقدار 2- 50px – پیکسل فضای خالی در جهت راست عنصر اعمال می کند.
مقدار 3 – 75px پیکسل فضای خالی در جهت پایین عنصر اعمال می کند.
مقدار 4 – 100px پیکسل فضای خالی در جهت چپ عنصر اعمال می کند.

در صورتی که بخواهید به هر جهت میزان متفاوتی فضای خالی اعمال کنید میبایست از 4 مقدار استفاده کنید. مقادیر، در جهت حرکت عقربه های ساعت روی عنصر اعمال می شوند. به عنوان مثال: margin: 10px 20px 30px 40px، در جهت بالا 10 پیکسل فضای خالی، در جهت راست 20 پیکسل فضای خالی، 30 پیکسل فضای خالی، 40 پیکسل فضای خالی اعمال می کند.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid #4CAF50;
  margin: 100px 150px 100px 80px;
}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p>استفاده از خاصیت margin با 4 مقدار - مقادیر در جهت حرکت عقربه های ساعت فضای خالی به عنصر اعمال می کنند.
</p>
</div></div>

</body>
</html>

نتیجه به صورت زیر خواهد بود:

استفاده از خاصیت margin با 4 مقدار – مقادیر در جهت حرکت عقربه های ساعت فضای خالی به عنصر اعمال می کنند.

خاصیت margin با 2 مقدار

margin: 50px 20px;

مقدار 1- 50px پیکسل فضای خالی در جهات بالا و پایین عنصر اعمال می کند.
مقدار 2- 20px پیکسل فضای خالی در جهات راست و چپ عنصر اعمال می کند.

زمانی که شما در خاصیت margin از 2 مقدار استفاده کنید، مقدار 1 به جهات بالا و پایین عنصر فضای خالی و مقدار 2 به جهات راست و چپ عنصر فضای خالی اعمال می کند.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid #4CAF50;
  margin: 50px 20px;
}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p>استفاده از خاصیت margin با 2 مقدار - مقدار اول به جهات بالا و پایین فضای خالی و مقدار 2 به جهات راست و چپ عنصر فضای خالی اعمال می کند.
</p>
</div></div>

</body>
</html>

نتیجه:

استفاده از خاصیت margin با 2 مقدار – مقدار اول به جهات بالا و پایین فضای خالی و مقدار 2 به جهات راست و چپ عنصر فضای خالی اعمال می کند.

خاصیت margin با 1 مقدار

margin: 50px;

به 4 جهت عنصر 50 پیکسل فضای خالی اعمال می شود.

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

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid #4CAF50;
  margin: 50px;
}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p>استفاده از خاصیت margin با 1 مقدار - تمام جهات یک میزان فضای خالی خواهند گرفت.
</p>
</div></div>

</body>
</html>

نتیجه:

خاصیت margin با 1 مقدار، به 4 جهت عنصر به یک میزان فضای خالی اعمال می کند.

خاصیت margin با مقدار auto

مقدار auto این اجازه را به مرورگر میدهد که فضای اطراف را به صورت خودکار تنظیم کند. اگر عنصر خاصیت عرض یا width گرفته باشد در مرکز صفحه قرار میگیرد در غیر این صورت تمام عرض را پوشش می دهد.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width:200px;
  border: 1px solid #4CAF50;
  margin: auto;
}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p>خاصیت margin با مقدار auto
</p>
</div></div>

</body>
</html>

همانطور که میبیند پس از اعمال مقدار auto، عنصر در مرکز قرار گرفته است:

خاصیت margin با مقدار auto

خاصیت margin با مقدار inherit

مقدار inherit، ویژگی ها را از عنصر پدر خود به ارث میبرد. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid #4CAF50;
  margin-left: 100px;
}
p.in{margin-left: inherit;}
.border-margin{
border: 1px solid red;
margin:auto
}

</style>
</head>
<body>


<div class="border-margin">
<div>
<p class="in">مقدار inherit این اجازه را می دهد که عنصر p ویژگی های را از پدر خود یعنی div به ارث برد. 
</p>
</div></div>

</body>
</html>

نتیجه به صورت زیر خواهد بود:

همانطور که میبیند عنصر p(متن) میزان 100 پیکسل فضای خالی از سمت چپ همانند پدر خود یعنی div(مرزبندی سبز رنگ) به ارث برده است.

مقدار inherit این اجازه را می دهد که عنصر p ویژگی های را از پدر خود یعنی div به ارث برد.

جلسه بعد

جلسه قبل