CSS margin Property

The margin property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed.

Formal syntax: [ <length> | <percentage> | auto ]{1,4} 

margin: 5px;
margin: 5px 10px;
margin: 5px 10px 8px;
margin: 5px 10px 8px 4px;

• <length>Specifies a fixed width. Negative Values are allowed.
• <percentage>A percentage relative to the width of the containing block. Negative values are allowed.
• autoauto is replaced by some suitable value, e.g. it can be used for centering of blocks.
  
  Can have between 1 to 4 values:
  1 value, all 4 sides have the same margin.
  2 values, the top and bottom margins are set to the first value and the right and left margins are set to the second.
  3 values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  4 values, they apply to the top, right, bottom, and left, respectively.

.class1 {margin: 10px;}
/* All sides have 10px margin */

.class2 {margin: 10px 5px;}
/* Top and Bottom have 10px margin, Left and Right have 5px margin */

.class3 {margin: 10px 5px 3px;}
/* Top has 10px margin, Left and Right have 5px margin, Bottom has 3px margin */

.class4 {margin: 10px 5px 3px 8px;}
/* Top has 10px margin, Right has 5px margin, Bottom has 3px margin, Left has 8px margin */

Click the button below to experiment with this property.

Give it a Try!

1+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+