CSS Margin Tag
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
| Value | Description |
|---|---|
| auto | The browser calculates a margin |
| length | Specifies a margin in px, pt, cm, etc. Default value is 0px |
| % | Specifies a margin in percent of the width of the containing element |
| inherit | Specifies that the margin should be inherited from the parent element |
It is possible to use negative values, to overlap content.
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-bottom:100px;
margin-right:50px;
margin-left:50px;
Try it yourself »
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;
Try it yourself »
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
