{{CSSRef}}
Summary
The margin
CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} and {{ Cssxref("margin-left") }}.
Negative values are also allowed.
{{cssinfo}}
Syntax
/* Apply to all four sides */ margin: 1em; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* Global values */ margin: inherit; margin: initial; margin: unset;
Values
Accepts one, two, three or four values of the following:
<percentage>
- Specifies a fixed width. Negative Values are allowed. See for {{cssxref("")}} possible units.
<percentage>
- A {{cssxref("<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
{{csssyntax}}
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%; }
{{ EmbedLiveSample('Simple_example') }}
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 |
---|---|---|
{{ SpecName('CSS3 Box', '#margin', 'margin') }} | {{ Spec2('CSS3 Box') }} | No significant change |
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }} | {{ Spec2('CSS3 Transitions') }} | Defines margin as animatable. |
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} | {{ Spec2('CSS2.1') }} | Removes its effect on inline elements. |
{{ SpecName('CSS1', '#margin', 'margin') }} | {{ Spec2('CSS1') }} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | {{ CompatGeckoDesktop("1") }} | 3.0 | 3.5 | 1.0 (85) |
auto value |
1.0 | {{ CompatGeckoDesktop("1") }} | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | {{ CompatGeckoMobile("1") }} | 6.0 | 6.0 | 1.0 |