آموزش کار با ویژگی Margins در CSS

[Mohlek]

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

پس ما با استفاده از این ویژگی میتوانیم یک فضای خالی ( فاصله ) را از سمت بیرونی یک عنصر ایجاد نماییم.

در CSS هر عنصر دارای ۴ جهت کلی است که این جهات به شرح زیر می باشد :

Top – جهت بالا
Right – جهت راست
Bottom – جهت پایین
Left – جهت چپ
پس ما میتونیم برای هر یک از این جهات مارجین تعریف کنیم و یا حتی میتونیم برای مثلا جهت راست و چپ تعریف کنیم و برای جهت بالا و پایین تعریف نکنیم.

ویژگی مارجین یا Margin در CSS میتونه مقادیر زیر رو داشته باشه :

auto – مرورگر بصورت خودکار اضافه خواهد کرد
length – با استفاده از واحدهای اندازه گیری مثله پیکسل،پوینت
% – مقدار فاصله بصورت درصدی مشخص می شود
inherit – مقدارش را از عنصر والدش یا پدرش به ارث می برد
مثال شماره ۱ : استفاده از حالت auto (با استفاده از این حالت میتوان یک عنصر را در وسط صفحه قرار داد)


<style>

div.test{
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
}

</style>
1
2
3
4
5
6
7
8
9
10
<style>

div.test{
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
}

</style>


مثال شماره ۲ : استفاده از واحدهای اندازه گیری همچون px,pt,in,cm و…


<style>

div.test{
margin-top:20px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
}

</style>
1
2
3
4
5
6
7
8
9
10
<style>

div.test{
margin-top:20px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
}

</style>
امتحان کنید

مثال شماره ۳ : استفاده از حالت درصدی (%) – بصورت درصدی فاصله را مشخص میکند.


<style>

div.test{
margin-top:20%;
margin-right:10%;
margin-bottom:20%;
margin-left:10%;
}

</style>
1
2
3
4
5
6
7
8
9
10
<style>

div.test{
margin-top:20%;
margin-right:10%;
margin-bottom:20%;
margin-left:10%;
}

</style>
امتحان کنید

مثال شماره ۴ : استفاده از حالت ارث بری – یعنی از عنصر پدرش (والد) اندازش را به ارث ببرد.

مثلا ما یک پاراگراف داریم که در داخل تگ div قرار دارد خب، پس تگ پاراگراف میشه فرزند تگ div و تگ div میشه والد یا پدر تگ پاراگراف.


<style>

div.pedar{
margin-top:10px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}

div.farzand{
margin-right:inherit;
margin-left:inherit;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>

div.pedar{
margin-top:10px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}

div.farzand{
margin-right:inherit;
margin-left:inherit;
}

</style>
امتحان کنید

Free-Learn
خلاصه نویسی ویژگی Margin در CSS
با استفاده از حالت خلاصه نویسی یک ویژگی میتونیم هم سرعت کدنویسی مون رو ببریم بالا و هم خوانایی کدهارو، پس پیشنهاد من اینه همیشه از حالت خلاصه نویسی استفاده کنید.

شکل کلی خلاصه نویسی ویژگی Margin بصورت زیر می باشد :


margin: top right bottom left;
1
margin: top right bottom left;
یعنی از بالا راست پایین چپ میتونیم فاصله رو با استفاده از حالت های بالا مشخص کنیم.

مثال شماره ۱ : استفاده از ۴ جهت


<style>

div.test{
margin:20px 40px 60px 100px;
}

</style>
1
2
3
4
5
6
7
<style>

div.test{
margin:20px 40px 60px 100px;
}

</style>
امتحان کنید

مثال شماره ۲ : استفاده از فقط راست و چپ


<style>

div.test{
margin:0 40px 0 100px;
}

</style>
1
2
3
4
5
6
7
<style>

div.test{
margin:0 40px 0 100px;
}

</style>
امتحان کنید

مثال شماره ۳ : استفاده از فقط بالا و پایین


<style>

div.test{
margin:50px 0 50px 0;
}

</style>
1
2
3
4
5
6
7
<style>

div.test{
margin:50px 0 50px 0;
}

</style>
امتحان کنید

مثال شماره ۴ : استفاده از ۴ جهت با استفاده از یک مقدار


<style>

div.test{
margin:50px;
}

</style>
1
2
3
4
5
6
7
<style>

div.test{
margin:50px;
}

</style>