Thursday, 19 December 2013

CSS » Margin


Margin it's just a space. Cannot be styled and it's fully transparent.
The margin clears an area around an element, outside the border.
Margin have 4 possible values:

Note: You can use negative values to overlap the content.



  • auto  ( The browser calculates a margin )
  • length ( Specifies a margin in px, pt, cm, etc. Default value is 0px )
  • % Specifies a margin in percent of the width of the containing element )
  • inheritSpecifies that the margin should be inherited from the parent element )















You can specify different margins.

» EXAMPLE:

<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-left: 100px;
margin-right: 100px;
margin-top: 40px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with ready margins.</p>
</body>
</html>


» Result:

This is heading with default margin.

This is paragraph with ready margins.



Shorthand property

You can specify all margin properties in one by using "margin" property.

» EXAMPLE:

<html>

<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin: 50px 100px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with ready margins.</p>
</body>
</html>


» Result:





This is heading with default margin.

This is paragraph with ready margins.



The margin property can have from one to four values.
  • margin:25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin:25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin:25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin:25px;
    • all four margins are 25px





Using cm value for margins

» EXAMPLE:


<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-top: 3cm;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with setted margins.</p>
</body>
</html>


» Result:



This is heading with default margin.

This is paragraph with setted margins.





Using percents(%) for margins

» EXAMPLE:


<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-top: 10%;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with setted margins.</p>
</body>
</html>


» Result:


This is heading with default margin.

This is paragraph with setted margins.