CSS - 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
| Value |
Description |
| auto |
The browser sets the margin.
The result of this is dependant of the browser |
| length |
Defines a fixed margin (in pixels, pt, em, etc.) |
| % |
Defines a margin in % of the containing element |
It is possible to use negative values, to overlap content.
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;
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
The margin property can have from one to four values.
- margin:25px 50px 75px 100px;
1. top margin is 25px
2. right margin is 50px
3. bottom margin is 75px
4. left margin is 100px
- margin:25px 50px 75px;
1. top margin is 25px
2. right and left margins are 50px
3. bottom margin is 75px
- margin:25px 50px;
1. top and bottom margins are 25px
2. right and left margins are 50px
- margin:25px;
1. all four margins are 25px
