گروه مقاله : CSS

تاريخ انتشار : 1394/02/02 - 14:46

كد :225

CSS margin

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

در واقع margin فاصله ای شفاف بین عناصر موجود در صفحه می باشد که بعد از border قرار می گیرد. Margin کاملا شفاف و بدون پس ضمینه است. می توانید margin را از 4 سمت مختلف (top, right, bottom, left) با توجه به نیاز خود تغییر دهید.

Margin-top: 10px;

Margin-right: 15px;

Margin-bottom: 19px;

Margin-left: 8px;

مثال :

<!DOCTYPE html>

<html>

<head>

<style>

p {

background-color: yellow;

}

p.ex {

margin-top: 100px;

margin-bottom: 10px;

margin-right: 150px;

margin-left: 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified margins.</p>

<p class="ex">This is a paragraph with specified margins.</p>

</body>

</html>

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

Margin: top right bottom left;

Margin: 10px 20px 5px 15px;

مثال :

<!DOCTYPE html>

<html>

<head>

<style>

p {

background-color: yellow;

}

p.ex {

margin: 100px 150px 10px 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified margins.</p>

<p class="ex">This is a paragraph with specified margins.</p>

</body>

</html>

همچنین اگر بخواهید از همه طرف به یک اندازه margin بدهید، مثلا از همه طرف 10px می توانید آن را به صورت خلاصه به این شکل بنویسید :

Margin: 10px;

<!DOCTYPE html>

<html>

<head>

<style>

p {

background-color: yellow;

}

p.ex {

margin: 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified margins.</p>

<p class="ex">This is a paragraph with specified margins.</p>

</body>

</html>

یا اگر مقدار margin از بالا و پایین یکسان باشد مثلا 20px و از چپ و راست نیز یکسان باشد مثلا 10px می توان آن را به طور خلاصه بصورت زیر نوشت :

Margin: 20px 10px;

چنانچه margin فقط از سمت چپ و راست یکسان باشد نیز به صورت خلاصه می توان آن را مانند مثال زیر نوشت:

margin: 10px 20px 15px;

توجه داشته باشید که مقدار 20px هم از راست و هم از چپ می باشد.

مقادیری که به margin می توان داد :

Auto : مرورگر اندازه ی margin را محاسبه می کند.
مقدار دهی عددی : با استفاده از مقادیر بر حسب px, pt, cm, … می توان اندازه ی margin را تعریف نمود.
درصد : در این حالت margin بر حسب درصد با توجه به فضای اطراف در نظر گرفته می شود.
Inherit : در این شرایط مقدار margin از عنصر بیرونی خود ارث بری می کند.

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