CSS Margins

The Margins in CSS are creating space around the element and outside of its borders.

The margins can have numeric or percentage values (plus negative values) while they can also be specific as listed below:

margin-top: auto | numeric | % | inherit ;
margin-left: auto | numeric | % | inherit ;
margin-right: auto | numeric | % | inherit ;
margin-bottom: auto | numeric | % | inherit ;

The shorthand property:

margin: 15px 30px 45px 70px;

The above shorthand property is explained as per below:

top margin = 15px

right margin = 30px

bottom margin = 45px

left margin = 70px

Some Border examples:

                 
                  
    <style>
 .p1{
  margin: 40px;
  border: 2px solid #C818E8;
}

    </style>

      <div class="p1">Margin 40px</div>

The output:

Margin 40px