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.

  • Initial valueSee individual properties
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueSee individual properties
  • AnimatableYes
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript
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!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.