CSS Margins are used to create space around elements, outside of any defined borders. It is possible to use negative values to overlap content.The values of the margin property are not inherited by the child elements.
There are following CSS margin properties to set an element margin.
- margin : This property is used to set all the properties in one declaration.
- margin-left : it is used to set left margin of an element.
- margin-right : It is used to set right margin of an element.
- margin-top : It is used to set top margin of an element.
- margin-bottom : It is used to set bottom margin of an element.
All the margin properties can have the following values.
- auto : Browser calculate a margin.
- length : specifies a margin in px, pt, cm etc.its default value is 0px.
- % : specifies a margin in % of the width of the containing element
- inherit : It is used to inherit margin from parent element.
Syntax :
margin:auto;
margin:5px, 10px, 5px, 10px;
margin-top:55px;
margin-bottom:60px;
margin-right:70px;
margin-left:40px;
The margin property has auto or one or four values.
If margin property has one value:
margin:5px : All top, left, right, bottom margin are 5px.
If margin property has four value:
margin:5px, 10px, 15px, 10px;
- top margin is 5px
- right margin is 10px
- bottom margin is 15px
- left margin is 10px
CSS Margin Example :
<html>
<head>
<title>Learn Css Margin tutorials by aryatechno</title>
<style>
.txt1
{
margin:auto;
border:#CC6600 solid 1px;
}
.txt2
{
margin:15px;
border:#CC6600 solid 1px;
}
.txt3
{
margin-left:25px;
border:#CC6600 solid 1px;
}
.txt4
{
margin-right:35px;
border:#CC6600 solid 1px;
}
.txt5
{
margin-top:45px;
border:#CC6600 solid 1px;
}
.txt6
{
margin-bottom:25px;
border:#CC6600 solid 1px;
}
</style>
</head>
<body>
<p class="txt1">margin property set auto margin.</p>
<p class="txt2">margin property set 15px margin.</p>
<p class="txt3">margin-left property set 25px left margin.</p>
<p class="txt4">margin-right property set 35px right margin.</p>
<p class="txt5">margin-top property set 45px top margin.</p>
<p class="txt6">margin-bottom property set 25px bottom margin.</p>
</body>
</html>
Output :
margin property set auto margin.
margin property set 15px margin.
margin-left property set 25px left margin.
margin-right property set 35px right margin.
margin-top property set 45px top margin.
margin-bottom property set 25px bottom margin.
Comments