CSS 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

Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element

Margin - Individual sides

It is possible to specify different margins for different sides of an element:

<html>
   <head>
    <style type="text/css">
     p {
      margin-top:50px;
      margin-bottom:100px;
      margin-right:150px; 
      margin-left:200px;
      border:2px solid #999;  
     }
    </style>
  </head>
  <body>
   <p>
    It is possible to specify different margins for different sides of an element.
   </p>
  </body>
</html>
Output

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":

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

All CSS Margin Properties

Property Description
margin A shorthand property for setting the 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

Share this article on