Hello Devs, 

In this tutorial, we will learn CSS Margin

The CSS margin property is used to specify space around an element. The margin doesn't have any color. It is completely transparent. There are four properties for setting the margin for each side of an HTML element (top, right, bottom, and left).

Margin Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: pink;  
}  
p.ex {  
    margin-top: 100px;  
    margin-bottom: 100px;  
    margin-right: 150px;  
    margin-left: 150px;  
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified margin. </p>  
<p class="ex">This paragraph is displayed with specified margin.</p>  
</body>  
</html>


Margin - Shorthand Property

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: yellow;  
}  
p.ex {  
    margin: 50px 100px 50px 100px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified margin. </p>  
<p class="ex">This paragraph is displayed with specified margin.</p>  
</body> 
</html>


If the margin property has two values:

margin: 50px 100px;

  • top and bottom margins are 50px
  • right and left margins are 100px

Margin Example

<div class="w3-example">
<h3>Margin Example</h3>
<div class="w3-code htmlHigh notranslate w3-responsive">
<pre>
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: yellow;  
}  
p.ex {  
    margin: 50px 100px 50px 100px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified margin. </p>  
<p class="ex">This paragraph is displayed with specified margin.</p>  
</body> 
</html>

</pre>
</div>
</div>


If the margin property has one value:


margin: 100px;

all four margins are 100px


Margin Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: Lightgreen;  
}  
p.ex {  
    margin: 50px;  
     
}  
</style>  
</head>  
<body>  
<p>This paragraph is not displayed with specified margin. </p>  
<p class="ex">This paragraph is displayed with specified margin.</p>  
</body> 
</html>


The auto Value

Example: 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:400px;
  margin: auto;
  border: 1px solid green;
}
</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>


The inherit Value

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid green;
  margin-left: 70px;
}
 
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>



May this example help you.