خصوصیت margin در زبان CSS سعی می کند تا در اطراف یک عنصر فضای خالی ایجاد کند. زمانی که می گوییم اطراف یک عنصر یعنی هر چیزی که وابسته به این عنصر باشد کنارش می ماند (مانند حاشیه ها و …) اما بقیه ی عناصر مجاور کنار می روند. به زبان ساده تر margin یعنی فاصله ی بین یک عنصر و عناصر دور و برش (مانند تصاویر، متن ها و …).
در زبان CSS برای تعیین margin دستتان باز است و می توانید آن را از چهار طرف به صورت جداگانه تعیین کنید:
margin-topmargin-rightmargin-bottommargin-left
مقادیر قابل قبول برای margin ها عبارت اند از:
- auto: اگر این مقدار را به margin بدهید، خود مرورگر مقدارش را تعیین می کند.
- واحد طول: در این حالت باید مقدار margin را در یکی از واحد های طول پذیرفته شده مانند px یا pt یا cm و … تعیین کنید.
- درصد: در این حالت margin بر اساس درصدی از عرض عنصر تعیین می شود.
- inherit: در لغت به معنی «به ارث بردن» است. در این حالت margin مقدار خود را از عنصر پدرش به ارث می برد.
نکته: مقادیر منفی نیز مجاز هستند! مقادیر منفی به جای ایجاد فضای خالی، آن را کم می کنند و عناصر را به هم نزدیک تر می نمایند.
در مثال زیر برای عنصر div از هر چهار طرف margin تعیین کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
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-topmargin-rightmargin-bottommargin-left
اما برای راحتی کار شما شکل خلاصه شده ای از این 4 دستور وجود داشته و از این قرار است:
دستور margin برای مقادیر چهار تایی به صورت ;margin: 25px 50px 75px 100px :
- margin بالای عنصر 25px
- margin راست عنصر 50px
- margin پایین عنصر 75px
- margin چپ عنصر 100px
مثال: