The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left.

Syntax

The syntax of CSS margin property is as follows ?

Selector {
   margin: /*value*/
}

The value above can be ?

• margin-top

• margin-right

• margin-bottom

• margin-left

The following examples illustrate CSS margin shorthand property ?

Margin property with all the values

The margin property with all the values sets values for the top, right, bottom, and left properties ?

margin: 7% auto -3% 25%;

Example

Let us see the example ?

Margin property with a single value

The margin property with a single value sets the same value for all the top, bottom, left, and right properties ?

p.demo {
   margin: 30px;
}

Example

Let us see the example ?

   


   
Demo Heading
   
This is a demo text.
   
This is another demo text.
   
Another demo text
   
Demo Heading2
   
Demo text

Margin property with two values

The margin property with two values i.e., the top and bottom margins are 2em below. The left and right properties are 1em ?

margin: 2em 1em;

Example

Let us see the example ?

   


   
What is Spring Framework?
   

      Spring framework is an open source Java platform. It was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003. Spring is lightweight when it comes to size and transparency. The basic version of Spring framework is around 2MB.
   

Margin property with three values

The margin property with a single value sets the 35px for the top margin, 70px for the left & right margins. The 50px is set for the bottom margin ?

p.demo {
   margin: 35px 70px 50px;
}

Example

Let us see the example ?

   


   
Demo Heading
   
This is a demo text.
   
This is another demo text.
   
Another demo text
   
Demo Heading2
   
Demo text