CSS Property - Margin

Value: [ <length> | <percentage> | auto ]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: refer to width of closest block-level ancestor

The CSS property "margin" is a shortend version for setting the individual margin properties in one string in a style sheet or as an inline style in a HTML document:

If four length values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.


body{margin: 2em;} = all margins set to 2em

body{margin: 1em 2em;} = top & bottom = 1em, right & left = 2em

body{margin: 1em 2em 3em;} = top - "1em", right - "2em", bottom - "3em", left - "2em"

The last rule of the example above is equivalent to the example below:


margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;

margin-left inherits the 2em from the margin-right attribute

Negative margin values are allowed, but there may be implementation and or browser specific limitations.