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: margin-top
, margin-right
, margin-bottom
and margin-left
.
Negative values are also allowed.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the width of the containing block |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animatable | yes, as a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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:
<length>
- Specifies a fixed width. Negative Values are allowed. See for
<length>
possible units. <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
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'margin' in that specification. |
Working Draft | 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
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 Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
jwhitlock,
Simplexible,
Prinz_Rana,
teoli,
Sebastianz,
fscholz,
manishbhatt94,
wbamberg,
ilyakamens,
AlexKapellas,
jgw96,
EliasH,
HTMLValidator,
dbruant,
Sipmann,
kscarfone,
Sheppy,
Izzy,
ethertank,
McGurk,
grendel,
Yuichiro,
mmclark,
Jürgen Jeka,
Offshore,
BijuGC
Last updated by:
jwhitlock,