The CSS margin properties define the space around elements.
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.
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 |
Note: It is also possible to use negative values, to overlap content. |
In CSS, it is possible to specify different margins for different sides of an element:
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":
The margin property can have from one to four values.
Set the top margin of a text using a cm value
This example demonstrates how to set the top margin of a text using a cm value.
Set the bottom margin of a text using a percent value
This example demonstrates how to set the bottom margin in percent, relative to the width of the containing element.
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |