CSS margin (outer margin)

The CSS margin property defines the space around elements.

margin

The margin clears the area around the (outer border) element. The margin has no background color and is completely transparent.

The margin can individually change the top, bottom, left, and right margins of an element, or change all properties at once.

Value	Description
auto	Set browser margins. The result of this will depend on the browser
length	Define a fixed margin (using pixels, pt, em, etc.)
%	Define a margin using a percentage.

Remark Margins can use negative values, overlapping content.

In CSS, it can specify different margins for different sides:

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

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

The shorthand property for all margin properties ismargin :

margin:100px 50px;

The margin property can have 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
- left and right margins are 50px
- bottom margin is 75px
margin:25px 50px;
- top and bottom margins are 25px
- left and right margins are 50px
margin:25px;
- All four margins are 25px

The top margin setting of the text uses centimeter values.
This example demonstrates how to set the top margin of a text using a centimeter value.

Set Use a percentage value to set the text's bottom margin
This example demonstrates how to set the bottom margin using a percentage value, relative to the width of the containing element.

Property	Description
margin	Shorthand property. Sets all 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.

other extensions