CSS margin

Table of Contents

CSS margin is the outer most element in the box model. The margin property creates space around an HTML element. It is a usual practice to define margin for HTML elements because white-space helps create beautiful designs. CSS defines 4 types of margin for an element.

margin-top
margin-left
margin-bottom
margin-left

You can treat CSS margin as an invisible border, though the element border do exist in box model.

The syntax to specify the margin property is given below.

p {
     margin-left: auto;
     margin-top: 15px;
     margin-bottom: 34%;
     margin-right: inherit;
}

The margin properties in above example has 4 different types of values.

auto – an automatic value is set by browser.
length – px, pt, em and other kind of length is specified.
percentage – length % is calculated based on the width of the containing element.
inherit – length of margin inherited from parent element.

Shortcut Version of Margin

It is difficult to specify margin individually, so to solve this problem there is a shortcut version available. You can set all four margins in a single line of code.

margin: <length of top> <length of right> <length of bottom> <length of left>;

For example

h3{
    margin: 10px 20px 50px 70px;
}

The above is similar to margin values assigned below.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 50px;
margin-left: 70px;

Effect of Margin on HTML elements

The effect of margin on HTML elements can be understood using following examples. Create an HTML page – example-margin-effect.html and insert the following codes.

<!DOCTYPE html>
<html>
<head>
     <title>HTML Margin Effect</title>
     <style>
          h3{
               padding:10px;
               clear:both;
          }
          .box1 , .box2 {
               padding:20px;
               width: 30%;
               margin: 0px;
               border: 2px solid red;
               float: left;
          }
          .box3 , .box4 {
               padding:20px;
               width: 30%;
               margin: 40px;
               border: 2px solid red;
               float: left;
          }
     </style>
</head>
<body>
     <h3> Box 1 and Box 2 - No Margin</h3>
     <p class="box1">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis
           nostrud exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat.
     </p>
     <p class="box2">
           Risus nec feugiat in fermentum posuere urna 
           nec tincidunt praesent. Id leo in
           vitae turpis. In massa tempor nec 
           feugiat nisl pretium fusce id velit.
      </p>
     <h3> Box 1 and Box 2 - No Margin</h3>
     <p class="box3">
          Lorem ipsum dolor sit amet, consectetur 
          adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris 
          nisi ut aliquip ex ea commodo consequat.
     </p>
     <p class="box4">
          Risus nec feugiat in fermentum posuere 
          urna nec tincidunt praesent. Id leo in
          vitae turpis. In massa tempor nec 
          feugiat nisl pretium fusce id velit.
      </p>
 </body>
</html>

Output

In the example, you have two boxes on top with no margin – Box1 and Box2 and it resulted in two elements much closer to each other. The second set of boxes are Box3 and Box4 with a margin of 20px each. The result of bottom two boxes with margin is a cleaner design with white-spaces between both boxes.

CSS Margin

Shortcut Version of Margin

Effect of Margin on HTML elements

Output