خلاصه مطلب
خواصیت margin درCSS حاشیه را برای چهار طرف عنصر مشخص می کند. این خواصیت خلاصه شده چهار خواصیت margin-top
، margin-right
، margin-bottom
و margin-left
می باشد که برای جلوگیری از مقدار دهی به هر کدام از این خواص تعبیه شده است.
همچنین قابلیت مقداردهی با مقادیر منفی را نیز داراست.
روش استفاده
/* به هر چهار جهت این مقدار اعمال می گردد */
margin: 1em;
/*افقی (قسمت چپ و راست) | عمودی (قسمت بالا و پایین) */
margin: 5% auto;
/* پایین | افقی(چپ و راست) | بالا */
margin: 1em auto 2em;
/* چپ | پایین | راست | بالا */
margin: 2px 1em 0 auto;
margin: وارث;
مقادیر
یک، دو، سه و یا چهار عدد از مقادیر زیر را می پذیرد:
<length>
- مقدار ثابتی را مشخص می کند. مقادیر منفی مورد قبول هستند. مقادیر قابل قبول را در
<length>
مشاهده کنید. <percentage>
- A
<percentage>
relative to the width of the containing block. Negative values are allowed. auto
auto
is replaced by some suitable value, e.g. it can be used for centering of blocks.
div { width:50%; margin:0 auto; }
centers the div container horizontally.
- One single value applies to all four sides.
- Two values apply first to top and bottom, the second one to left and right.
- Three values apply first to top, second to left and right and third to bottom.
- Four values apply to top, right, bottom and left in that order (clockwise).
Formal syntax
Examples
Simple example
HTML
<div class="ex1">
margin: auto;
background: gold;
width: 66%;
</div>
<div class="ex2">
margin: 20px 0 0 -20px;
background: gold;
width: 66%;
</div>
CSS
.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}
Another example
margin: 5%; /* all sides 5% margin */
margin: 10px; /* all sides 10px margin */
margin: 1.6em 20px; /* top and bottom 1.6em, left and right 20px margin */
margin: 10px 3% 1em; /* top 10px, left and right 3%, bottom 1em margin */
margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
margin: 1em auto; /* 1em margin on top and bottom, box is horizontally centered */
margin: auto; /* box is horizontally centered, 0 margin on top and bottom */
Horizontal centering with margin: 0 auto;
To center something horizontally in modern browsers, use display: flex; justify-content: center;
.
However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use margin: 0 auto;
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'margin' in that specification. |
Candidate Recommendation | No significant change. |
CSS Transitions The definition of 'margin' in that specification. |
Working Draft | Defines margin as animatable. |
CSS Level 2 (Revision 1) The definition of 'margin' in that specification. |
Recommendation | Removes its effect on inline elements. |
CSS Level 1 The definition of 'margin' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
auto value |
1.0 | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |