Margin define the space in outside the container like this:
You can can apply margin properties to each side of element individually.
- margin-top - margin-right - margin-bottom - margin-left ExampleYou can sets the margins on all four sides differently
Example<html>
<head>
<style>
.paragraph {
margin-top: 50px;
margin-bottom: 80px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p class="paragraph">margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides</p>
</body>
</html>
Above four properties can use in single statement like this:
Syntax div{margin:top right bottom left; } Example
<style>
.short {
margin:20px 30px 40px 50px;
border: 2px dashed #a2a2a2;
}
</style>
<div class="short">This element has a shorthand margin property applied .</div>
margin:15px 10px; •Top and bottom have a margin of 15 pixels. •Right and left have a margin of 10 pixels.
margin:15px 10px 40px; •Top is 10px •Left and right are 10px •Bottom is 30px
This example set the margin on all four sides
<style>
.allside{
margin:30px ;
border: 2px dashed grey;
}
</style>
<div class="allside">
This margin property set 30px on all four sides top,right,bottom and left.
</div>
You can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.. For example,
<html>
<head>
<style>
.main {
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div class="main">
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto
<div>
</body>
</html>
It will use the same value as the same property his parent has use.
Example<html>
<head>
<style type="text/css">
.parent{
margin:100px;
}
.inherit{
margin: inherit;
}
</style>
</head>
<body class="parent">
<h1 class="inherit"> It will use the same value as the same property his parent has use</h1>
</body>
</html>