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 )
- inherit ( Specifies 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.
No comments:
Post a Comment