CSS Margin

Margins define the space around the element. CSS margins are specified in a similar way to borders - they can be set individually for each side, or all sides at once.The margin property can be set for the top, left, right and bottom of an element. (see example below)

  margin-top: length percentage or auto;
  margin-left: length percentage or auto;
  margin-right: length percentage or auto;
  margin-bottom: length percentage or auto;

Possible Values

Value	Description
auto	The browser sets the margin. The result of this is dependant of the browser
length	Defines a fixed margin (in pixels, pt, em, etc.)
%	Defines a margin in % of the containing element

You can also declare all the margins of an element in a single property as follows:
  margin: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

1. top
2. right
3. bottom
4. left

If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;

If only 2 values are declared (see below)
margin:10px 20px;  

• Top and bottom have a margin of 10 pixels.
•  Right and left have a margin of 20 pixels.



If only 3 values are declared (see below)
 margin:10px 20px 30px;

•  Top is 10px
• Left and right are 20px
• Bottom is 30px

 If only 4 values are declared (see below)
margin:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px