Margin Styles
CSS margin property is used to specify margins for the content of html elements. Margin is the space to be leave from the edge of the page to the beginning of the content.
The following four individual margin properties can be used to set margin:
margin-top
margin-left
margin-right
margin-bottom
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Auto margin
Margin value ‘auto’ allows the browser to select margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
Inherited Margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class=”ex1″>This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>