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.
|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.
|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|