In CSS margin is a property which is used to put some space around some targeted
box or any specific element.There are following properties of margin are explained below.
1) margin-top
2) margin-right
3) margin-bottom
4) margin-left
These all properties are defined and explained below with example and
source code.Hope you will enjoy it.
Example of margin-top
<style type="text/css">
.out-d1{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d1{
margin-top: 50px;;
width: 100%;
border: 1px solid blue;
height: 100px;
background: lightyellow;
}
</style>
<div class="out-d1">
<div class="in-d1">
This is inner div.This inner div has 50px margin from top.
And there is no margin is applied from left, right and bottom
sides.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from top.
And there is no margin is applied from left, right and bottom
sides.
Example of margin-right
<style type="text/css">
.out-d2{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d2{
margin-right: 50px;;
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>
<div class="out-d2">
<div class="in-d2">
This is inner div.This inner div has 50px margin from right.
And there is no margin is applied from left, top and bottom
sides.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from right.
And there is no margin is applied from left, top and bottom
sides.
Example of margin-bottom
<style type="text/css">
.out-d3{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d3{
margin-bottom: 50px;;
border: 1px solid blue;
height: 100px;
background: lightyellow;
}
</style>
<div class="out-d3">
<div class="in-d3">
This is inner div.This inner div has 50px margin from bottom.
And there is no margin is applied from left, top and right
sides.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from bottom.
And there is no margin is applied from left, top and right
sides.
Example of margin-left
<style type="text/css">
.out-d4{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d4{
margin-left: 50px;;
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>
<div class="out-d4">
<div class="in-d4">
This is inner div.This inner div has 50px margin from left.
And there is no margin is applied from bottom, top and right
sides..
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from left.
And there is no margin is applied from bottom, top and right
sides.
Example of margin shorthands
Margin with four values
<style type="text/css">
.out-d5{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d5{
margin: 50px 30px 50px 30px;
border: 1px solid blue;
height: 50px;
background: lightyellow;
}
</style>
<div class="out-d5">
<div class="in-d5">
This is inner div.This inner div has 50px margin from top, 30px
margin from left and right and 50px margin from bottom.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from top and bottom, 30px
margin from left and right.
Margin with three values
<style type="text/css">
.out-d5{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d5{
margin: 50px 30px 50px;
border: 1px solid blue;
height: 50px;
background: lightyellow;
}
</style>
<div class="out-d5">
<div class="in-d5">
This is inner div.This inner div has 50px margin from top, 30px
margin from left and right and 50px margin from bottom.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from top and bottom, 30px
margin from left and right.
Margin with two values
<style type="text/css">
.out-d6{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d6{
margin: 50px 30px;
border: 1px solid blue;
height: 50px;
background: lightyellow;
}
</style>
<div class="out-d6">
<div class="in-d6">
This is inner div.This inner div has 50px margin from top and bottom, 30px
margin from left and right.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from top and bottom, 30px
margin from left and right.
Margin with one value
<style type="text/css">
.out-d7{
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d7{
margin: 50px;
border: 1px solid blue;
height: 50px;
background: lightyellow;
}
</style>
<div class="out-d7">
<div class="in-d7">
This is inner div.This inner div has 50px margin from top,bottom,left and right.
</div>
</div>
Output of above code
This is inner div.This inner div has 50px margin from top,bottom,left and right..
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
