خصوصیت 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
18
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
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
margin:25px50px75px100px;
background-color:lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property-4values</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
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
margin:25px50px75px;
background-color:lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property-3values</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
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
margin:25px50px;
background-color:lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property-2values</h2>
<div dir='rtl'>اینعنصرdivدارایmarginبالای25پیکسلوسپسmarginراست50پیکسلوmarginپایین25پیکسلوmarginچپ50پیکسلمیباشد.</div>
<hr>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دستور margin برای مقادیر تکی به صورت ;margin: 25px:
- margin بالا و پایین و چپ و راست عنصر 25px
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
margin:25px;
background-color:lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property-1value</h2>
<div dir='rtl'>
اینdivازهرچهارطرفدارایmarginمعادل25پیکسلاست.
</div>
<hr>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مقادیر auto و inherit
اگر از مقدار auto استفاده کنید مرورگر عنصر مورد نظر را (در محور افقی) وسط عنصر پدرش می گذارد. به عبارت دیگر auto ابتدا عرض عنصر یا width را می گیرد و سپس هر چقدر فضا باقی ماند بین قسمت چپ و راست تقسیم می شود. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
margin:auto;
border:1pxsolidred;
}
</style>
</head>
<body>
<h2>Useof margin:auto</h2>
<pdir='rtl'> auto ابتداعرضعنصریاwidthرامیگیردوسپسهرچقدرفضاباقیماندبینقسمتچپوراستتقسیممیکند.</p>
<div>
Thisdiv will be horizontally centered because it has margin:auto;
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اما اگر به عنصرتان مقدار inherit را بدهید، همان margin پدر را به ارث می برید. در مثال زیر عنصر <p class="ex1"> را داریم و می خواهیم margin سمت چپ اش را از پدرش (یعنی <div>) به ارث ببرد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidred;
margin-left:100px;
}
p.ex1 {
margin-left:inherit;
}
</style>
</head>
<body>
<h2>Useof the inherit value</h2>
<p>Let the left margin be inherited from the parentelement:</p>
<div>
<pclass="ex1">Thisparagraph 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 بزرگتر) می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
margin:0050px0;
}
h2 {
margin:20px000;
}
</style>
</head>
<body>
<pdir='rtl'>درکدزیر h1دارایmarginتحتانی50پیکسلو h2دارایmarginفوقانی20پیکسلاست.بنابراینفاصلهیعمودیبین h1و h2باید70پیکسلباشد(50px+20px)اماmarginهارویهممیافتندوفاصلهیبینشان 50پیکسل(مقدارmarginبزرگتر)میشود</p>
<h1>Heading1</h1>
<h2>Heading2</h2>
</body>
</html>
|
مشاهده ی خروجی در JSBin
باید همیشه مراقب این اتفاق در HTML و CSS باشید و محاسبات خود را بر اساس آن انجام دهید. گرچه در قسمت های آینده توضیحات بیشتری در مورد این نوع خطاها به شما می دهیم.
امیدوارم از این قسمت استفاده ی کافی را برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟