CSS Margin

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

1. auto: The browser sets the margin. The result of this is dependant of the browser
2. length: Defines a fixed margin (in pixels, pt, em, etc.)
3. %: Defines a margin in % of the containing element

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:

Example

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Margin - Shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.

The shorthand property for all the margin properties is "margin":

Example

• margin:100px 50px;

The margin property can have from one to four values.

• margin:25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
• margin:25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px
• margin:25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px
• margin:25px;
• all four margins are 25px