CSS Margin Properties

The CSS margin properties allow you to set the margins around the sides of an element’s box. The margins does not have a background-color, it is completely transparent.

Margins for Individual Sides

You can easily specify the different margins for the different sides of an element such as top, right, bottom or left side using the
CSS individual margin property.

h1 { margin-bottom: 20px;}
p { margin-left: 10px; margin-right: 30px;}

Shorthand Property

The margin property is a shorthand property to avoid setting margin of each side separately: margin-top, margin-right, margin-bottom and margin-left.

 h1 {margin: 0 10px;}
p { margin: 25px 50px 75px 100px;}

If one value is set, this is applied to all the four sides.
If two values are specified, the first value is applied to the top and bottom, and the second value is applied to the right and left side
If three values are specified, the first value is applied to the top, second value is applied to left and right side and the last value is applied to the bottom.
If four values are specified, they are applied to the top, right, bottom and the left side respectively in the specified order..