CSS margin Property
The margin property sets all four margins of an element in one declaration,
margins being the space between one element and another.
For an explanation of the relationship between margins, borders, padding and content please have a look at the CSS
Box Model page.
Possible Values
Each individual margin can be set using one of the following values:
- A length value:
- em - relative unit - the width of the 'font-size' of the font in use.
- ex - relative unit - the height of the letter 'x' in the current font.
- in - absolute unit - inches.
- mm - absolute unit - millimeters.
- cm - absolute unit - centimeters.
- pt - absolute unit - points - a point is 1/72nd of an inch.
- pc - absolute unit - picas - one pica = 12 pt.
- px - absolute unit - pixel - one pixel = 0.75 pt.
- a percentage - in relation to the width of the block that contains the box.
- auto - the browser calculates the values of the margins - most commonly causes the element to be centered within its' containing block.
- inherit - the value is inherited from the parent element.
The margin property can be used on all elements except those with table display types other than table-caption, table and inline-table.
Code Example
div{margin: 1em 2em 3em 4em;}
The margin property can have from one to four values:
- When one value is given all four sides have the same margin.
- When two values are given the top and bottom are given the first value and the right and left sides share the second value.
- When three values are set the top is given the first value, the left and right sides share the second and the bottom is set to the third.
- With four values the margins are set in the following order: top, right, bottom and left.
Examples
Here are a couple of examples of the margin property applied to a paragraph within a <div>,
the <div> has been given a border and the <p> element has a background colour added to illustrate the effect
of the margin declaration.
This paragraph has been styled with the following declaration:
margin: 1em 2em 3em 4em;.
This paragraph has been styled with the following declaration:
margin: 0 10% 4em;