How to set margin properties in CSS (cascading style sheet)?

margins in CSS

Margins in CSS

When there is need to increase or decrease the space around an HTML element, the margin properties of CSS come into action. You have full control over margins using CSS. These properties are used to give space around an HTML element. When you create your document, the browser represent each element as a rectangular box which is shown above and it explains, How to set margin properties in CSS (cascading style sheet)?

The area coloured as green in above image is actually the content area where text, images and video players are kept. Saffron colour area represents padding of an element and outside to this padding area, there is border area and finally outside the border area, comes a margin area.

This margin of an element has four sides to set as per your requirement, top, bottom, left and right margins. Therefore, you can apply the following margins properties to your program.

  1. margin: It is the shorthand property and can be applied in one declaration only.
  2. margin-top: It declares margin for top side only.
  3. margin-right: It declares margin for right side only.
  4. margin-bottom: It declares margin for bottom side only.
  5. margin-left: It declares margin for left side only.

The margin property

The margin property in CSS applies margin to all four sides in one declaration only. Let us take an example, How to set margin properties in CSS (cascading style sheet)?.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       margin:20px;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       margin:40px;
       }
   </style>
   </head>
   
   <body>
      <p ID ="p1">
         First para border whose margin is set as 20px.
      </p>
      <p ID ="p2">
         Second para border whose margin is set as 40px.
      </p>
   </body>
</html>      

Result

The margin property, www.programmingtutorial.in

The top margin property

This property allows you to set margin from the top to an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       margin-top:100px;
       width:30%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       margin-top:3%;
       width:30%;
       }
   </style>
   </head>
   
   <body>
      <p ID ="p1">
         First para border whose top margin is set as 100px with respect to second para.
      </p>
      <p ID ="p2">
         Second para border whose top margin is set as 3% with respect to the height of screen.
      </p>
   </body>
</html> 

It results as:

The top margin property, www.programmingtutorial.in

The margin right property

This property allows you to set margin from the right of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       margin-right:100px;
       width-left:30%;
       text-align:right;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       margin-right:3%;
       width-left:30%;
       text-align:right;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para border whose right margin is set as 100px.
      </p>
      <p ID ="p2">
         Second para border whose right margin is set as 3% with respect to the width of screen.
      </p>
   </body>
</html> 
The margin right property

The margin bottom property

This property allows you to set margin from the bottom of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       margin-bottom:100px;
       width:30%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       margin-bottom:5%;
       width:30%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para border whose bottom margin is set as 100px with respect to second para.
      </p>
      <p ID ="p2">
         Second para border whose bottom margin is set as 5% with respect to the height of screen.
      </p>
      <hr>
   </body>
</html>   

It results as:

The margin bottom property, www.programmingtutorial.in

The margin left property

This property allows you to set margin from the left to an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       margin-left:100px;
       width:30%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       margin-left:3%;
       width:30%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para border whose left margin is set as 100px.
      </p>
      <p ID ="p2">
         Second para border whose left margin is set as 3% with respect to the width of screen.
      </p>
   </body>
</html> 
The margin left property, www.programmingtutorial.in

To run code, copy code and paste it in notepad and open with browser.