Everything about css margin property

what is margin?

We know that the space between content and border is called padding. It means
padding gives space from inside but margin give space from outside. Suppose we have
two div and we want space between two div. In that case we use
margin. It will give space between to div. Now if we want to give space between div and div content(present inside div) then we will use padding.

Margin properties

margin-top:
This property is used to give margin at top.
Pass value in pixel, percentage, etc.
margin-bottom:
This property is used to give margin at bottom.
Pass value in pixel, percentage, etc.
margin-left:
This property is used to give margin at left.
Pass value in pixel, percentage, etc.
margin-right:
This property is used to give margin at right.
Pass value in pixel, percentage, etc.
margin:auto;
By using this property, the elements will take margin automatically.
margin:
This is a shorthand technique.
Example 1:
margin:margin_top margin_right margin_bottom margin_left ;
margin: 25px 50px 75px 100px;

Example 2:
margin:margin_top margin_right_and_left margin_bottom ;
margin: 25px 50px 75px ;

Example 3:
margin:margin_top_and_bottom margin_right_and_left ;
margin: 25px 50px;

Example 4:
margin:all_side;
margin: 25px ;

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    #first_heading{
        border:solid 5px red;
        margin-top:6px;
        margin-bottom:10px;
        margin-left:3%;
        margin-right:5%;
    }
    .last_heading{
        border:solid 5px blue;
        margin: 10px;
    }
    #first{
        border:solid 5px red;
    }
    .last{
        border:solid 5px red;
    }
</style>
</head>
<body>

<h2 id="first">Welcome to this website</h2>
<h3 class="last">Thanks for choosing this website</h3>
<h2 id="first_heading">Welcome to this website</h2>
<h3 class="last_heading">Thanks for choosing this website</h3>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us