CSS HTML Javascript jQuery Ajax PHP Example Java MORE
Need a Website Or Web Application Contact : +91 9437911966 (Whatsapp) Note: Paid Service

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).

CSS Margin Properties

Property Description
margin This property is used to set all the properties in one declaration.
margin-left It is used to set the left margin of an element.
margin-right It is used to set the right margin of an element.
margin-top It is used to set the top margin of an element.
margin-bottom It is used to set the bottom margin of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description
auto This is used to let the browser auto calculate a margin.
length It is used to specify a margin pt, px, cm, etc. The default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.

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>

Run it yourself

Margin - Shorthand Property

To minimize the code, it is possible in CSS to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

So, here is how it works:

If the margin property has four values:

    margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

Margin Example

<!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>

Run it yourself

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>
<p><a href="#" class="w3-btn  w3-green" target="_blank">Run it yourself</a></p>
</div>

Run it yourself

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>

Run it yourself

The auto Value

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.

<!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>

Run it yourself

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

<!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>

Run it yourself