margin

خلاصه مطلب

خواصیت 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

[ <length> | <percentage> | auto ]{1,4}

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

Browser compatibility

See also

• Margin collapsing