CSS margin (Margin)

The CSS margin property defines the space around elements.

Margin

Margin clears an area around the element (outside the border). Margin has no background color and is completely transparent.

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

Possible Values

Margin - Individual Side Margin Properties

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

Example

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

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 margin properties is margin:

Example

margin: 100px 50px;

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

More Examples

Set text top margin using cm values

Set text bottom margin using percentage values

All CSS Margin Properties