CSS Margin

The CSS margin properties define the space around elements.

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

	Note: It is also possible to use negative values, to overlap content.

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides of an element:

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

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
  • right and left margins are 50px
  • bottom margin is 75px
  
  
• margin: 25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px
  
  
• margin: 25px;
  • all four margins are 25px

More Examples

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.

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »

All CSS Margin Properties