وِیژگی margin در CSS

margin Property

ویژگی کوتاه نویسی margin در CSS، مقادیر چهار ویژگی دیگر ( margin-top , margin-right , margin-bottom , margin-left ) را مشخص می کند. این ویژگی، فاصله ای از جهات دلخواه را بین عنصر مورد نظر و عناصر اطراف آن ایجاد می کند.

نحوه نوشتار

/* به هر چهار طرف یک مقدار اعمال می شود */
margin: 2rem;
margin: -13px;

/* افقی | عمودی */
margin: 7% 4em;

/* پایین | راست و چپ | بالا */
margin: 2px auto 7px; 

/* چپ | پایین | راست | بالا */
margin: 2px 10px 0 auto;

نکته: margin-top و margin-bottom در عناصری که display:inline باشد، عمل نمی کند.

ویژگی margin می تواند یک، دو، سه و یا چهار ویژگی را بپذیرد. این ویژگی می تواند با یکی از واحدهای اندازه CSS مانند (px, em, rem)، درصد و یا کلیدواژه auto تعیین شود. مقادیر منفی نیز قابل استفاده هستند و عنصر را از حالت پیشفرض به عناصر اطراف خود نزدیکتر می کنند.

این ویژگی با قبول مقادیر در تعداد مختلف، به اشکال زیر عمل می کند:

• اگر یک مقدار مشخص شود: این مقدار به هر چهار طرف عنصر اعمال می شود.
• اگر دو مقدار مشخص شود: مقدار اول به بالا و پایین و مقدار دوم به راست و چپ عنصر اعمال می شود.
• اگر سه مقدار مشخص شود: مقدار اول به بالا، مقدار دوم به راست و چپ و مقدار چهارم به پایین عنصر اعمال می شود.
• اگر چهار مقدار مشخص شود: مقدار اول به بالا، مقدار دوم به راست، مقدار سوم به پایین و مقدار چهارم به سمت چپ عنصر اعمال می شود. (ساعت گرد)

در مثال زیر نحوه عملکرد ویژگی margin را میبینیم:

html

<div class="wrapper">
   <p>margin: 20px 4px 10px 30px;</p>
   <div class="box"></div>
   <div class="el1"></div>
   <div class="box"></div>
</div>
<div class="wrapper">
   <p>margin: 15%;</p>
   <div class="box"></div>
   <div class="el2"></div>
   <div class="box"></div>
</div>
<div class="wrapper">
   <p>margin: 10px auto 3.5rem;</p>
   <div class="box"></div>
   <div class="el3"></div>
   <div class="box"></div>
</div>

css

* { margin: 0; }
.wrapper {
    float: left;
    margin: 20px 20px 0;
    border: 2px dotted red;
}
p {
    font-family: monospace;
    text-align: center;
    color: red;
    margin-bottom: 15px;
}
.box {
    background-color: #999999;
    width: 200px;
    height: 20px;
}
[class*="el"] {
    width: 50px;
    height: 50px;
    background-color: lightgreen;
}
.el1 { 
    margin: 20px 4px 10px 30px; 
}
.el2 { 
    margin: 15%; 
}
.el3 { 
    margin: 10px auto 3.5rem; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

ویژگی margin از چهار ویژگی دیگر تشکیل می شود که در صورت استفاده از هرکدام از آنها تنها به یکی از سمت ها مقدار مشخص اعمال می شود، که عبارتند از:

• margin-top
• margin-right
• margin-bottom
• margin-left

نحوه نوشتار

margin-top: 100px;
margin-bottom: 4rem;
margin-right: 6.5em;
margin-left: 10%;

در مثال زیر نحوه عملکرد این ویژگی را در اشکال دیگر میبینیم:

html

<div class="wrapper">
   <p>margin-right: 2em</p>
   <div class="box"></div>
   <div class="el1"></div>
   <div class="box"></div>
</div>
<div class="wrapper">
   <p>margin-top: 20%</p>
   <div class="box"></div>
   <div class="el2"></div>
   <div class="box"></div>
</div>
<div class="wrapper">
   <p>margin-bottom: 2em</p>
   <div class="box"></div>
   <div class="el3"></div>
   <div class="box"></div>
</div>
<div class="wrapper">
   <p>margin-left: 2em</p>
   <div class="box"></div>
   <div class="el4"></div>
   <div class="box"></div>
</div>

css

* { margin: 0; }
body {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
}
.wrapper {
   float: left;
   margin: 20px 20px 0;
   border: 2px dotted red;
}
p {
   font-family: monospace;
   text-align: center;
   color: red;
   margin-bottom: 15px;
}
.box {
   background-color: #999999;
   width: 200px;
   height: 20px;
}
[class*="el"] {
   width: 50px;
   height: 50px;
   background-color: dodgerblue;
}
el1 {
   margin-right: 2.3em;
   float: right;
}
.el1 + .box {
   content: "";
   display: block;
   clear: both;
}
.el2 {
   margin-top: 20%; 
}
.el3 {
   margin-bottom: 10%; 
}
.el4 {
   margin-left: 50px; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.