CSS - Margin

    With the CSS margin property, we can define the spacing around an HTML element. The margin property simply defines the space between the element and its neighbouring elements. It is different from CSS padding because it deals with the space outside the element border, whereas the padding defines the spacing between the element text and its border.

    Margin Property

    If we define a margin property for an element, then its child element will not inherit that Property, which can also lead to the collapsing problem. If two elements collapse the element content with a margin can overlap other element content. So, we need to be careful when we define the margin for any element.

    Example 

    <!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">

p{
border: 2px solid red;
}

.container{
border: 2px solid black;
}

.div_para{
margin:30px;

}
</style>

</head>

<body>

<div class='container'>

    <p class="div_para"> Margined paragraph</p>
    <p> Normal Paragraph with no styled margin</p>

</div>
</body>
</html>

    Output 

              Margined paragraph

Normal Paragraph with no styled margin

    Margin Properties and values

    There are other four properties associated with margin property, which give us more control over an element margin.

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

    The margin property is a combination of all these four properties, using only margin property we dine all the margin spacing for all four sides. There are four types of values we can use to set the margin property value and these four values are applicable for all the other subsidiary margin properties.

    • auto: This value will automatically set a margin value.
    • length : In length, we can use the p, pt, cm and other length units to set the margin values.
    • % : It adjusts the margin of the element according to the display size.
    • inherit : This value will inherit the margin value from the parent element.

    CSS margin-top property

    The margin-top property will specify the element spacing from the top.

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

p{
border: 2px solid red;
}
 
.container{
border: 2px solid black;
}

.div_para{
margin-top:40px;
}

</style>

</head>
<body>

<div class='container'>

  <p class="div_para"> Margined paragraph</p>
  <p> Normal Paragraph with styled margin</p>

</div>
</body>

</html>

    Output 

    Margined paragraph

Normal Paragraph with no styled margin

    The margin-bottom Property

    The margin-bottom Property set a specified value of spacing only to the element bottom.

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

p{
border: 2px solid red;
}

.container{
border: 2px solid black;
}

.div_para{
        margin-bottom:40px;

}

</style>
</head>
<body>

<div class='container'>

  <p class="div_para"> Margined paragraph</p>
  <p> Normal Paragraph without styled margin</p>

</div>
</body>
</html>

    Output 

    Margined paragraph

Normal Paragraph without styled margin 

    CSS margin-left Property

    The margin-left Property set the specified value of spacing to the left side of the element.

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

p{
border: 2px solid red;
}

.container{
border: 2px solid black;
}

.div_para{
margin-left:40px;
}
</style>

</head>
<body>

<div class='container'>
<p class="div_para"> Margined paragraph</p>
<p> Normal Paragraph without styled margin</p>
</div>

</body>
</html>

    Output 

            Margined paragraph

Normal Paragraph without styled margin

    CSS margin-right property

    The margin-right Property set the spacing or some margin to the right side of the element.

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

p{
border: 2px solid red;
}

.container{
border: 2px solid black;
}

.div_para{
        margin-right:40px;
     }

</style>
</head>
<body>

<div class='container'>
    <p class="div_para"> Margined paragraph</p>
    <p> Normal Paragraph without styled margin</p>
</div>

</body>
</html>

    Output 

    Margined paragraph

Normal Paragraph without styled margin

    The shorthand margin property

    However, manually set the all four sides margin spacing using only margin property. The margin property can accept four values at once, which represent all side of the element.

    Syntax: 

    margin: top right bottom left;

    Example: 

    p {
margin: 25px 50px 75px 100px;
}

    CSS margin Quick Summary

    • The margin specifies the spacing of an element from its parent element.
    • The margin property has four subsidiary properties which give more control over an element.
    • margin-right, margin-left, margin-top and margin-bottom are the four subsidiary properties of margin.
    • The margin property can also be used to set all four sides margin of an element.
    Previous Tutorial Next Tutorial