Home >>CSS Tutorial >CSS Margin property

CSS Margin property

CSS Margin

CSS Margin property is are used to create space around the element. Using the separated properties you can setting the margin for each side of an element (top, bottom, left and right). It is completely transparent. You have a full control over the margin by using CSS. Using the shorthand margin property you can also change all properties of margin at once.

CSS Margin Properties

These are the following CSS margin properties:

Property Description
Margin By using this property you can set all the properties in one declaration.
margin-left By using this property you can set space around the left margin of an element.
margin-right By using this property you can set right margin of an element.
margin-top By using this property you can set top margin of an element.
margin-bottom By using this property you can set bottom margin of an element.

CSS Margin Values

These are the following values for margin property.

Value Description
Auto In this property the margin is depend on the calculation of browser.
length It is used to define a margin cm, pt, px, etc. default value is 0px.
% It specifies a margin in percent of the width of containing element.
inherit It is used to specifies that the margin should be inherit from parent element.

Note: In case if you want to overlap content you can also use negative values.

Let's take an example of CSS margin:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4.demo {  
  background:pink;  
}  
h4.demo1 {  
    margin-top: 45px;  
    margin-bottom: 55px;  
    margin-right: 80px;  
    margin-left: 80px;
background:dodgerblue;	
}  
</style>  
</head>  
<body>  
<h4 class="demo">This paragraph is displayed without specified margin </h4>  
<h4 class="demo1">This paragraph is displayed with specified margin.</h4>  
</body>  
</html>  
Output:

This paragraph is displayed without specified margin.

This paragraph is displayed with specified margin.

Margin: Shorthand Property

CSS shorthand property is used to shorten the code. You can set all margin properties at once.

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

There are four values to define the margin property. You can use one of them as per your needs.

1. margin: 50px 100px 150px 200px

  • top margin is 50px
  • right margin is 100px
  • bottom margin is 150px
  • left margin is 200px

Let's take an example of shorthand property with four values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: : 50px 100px 150px 200px;
  background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>shorthand property with four values</h2>
<div>This div element has four values: top margin of 50px, a right margin of 100px, a bottom margin of 150px, and a left margin of 200px.</div>
</body>
</html>
Output:

shorthand property with four values

This div element has four values: top margin of 50px, a right margin of 100px, a bottom margin of 150px, and a left margin of 200px.

2. margin: 50px 100px 150px

  • top margin is 50px
  • right and left margin are 100px
  • bottom margin is 150px

Let's take an example of shorthand property with three values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 50px 100px 150px;
  background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with three values</h2>
<div>This div element has three values: top margin of 50px, a right and left margin of 100px, and a bottom margin of 150px.</div>
</body>
</html>
Output:

margin shorthand property with three values

This div element has three values: top margin of 50px, a right and left margin of 100px, and a bottom margin of 150px.

3. margin: 50px 100px

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

Let's take an example of shorthand property with two values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 50px 100px;
  background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with two values</h2>
<div>This div element has two values: top and bottom margin of 50px, and a right and left margin of 100px.</div>
</body>
</html>
Output:

margin shorthand property with two values

This div element has two values: top and bottom margin of 50px, and a right and left margin of 100px.

4. margin 50px

  • All four margins are 50px

Let's take an example of shorthand property with one value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 50px;
  background-color: #dc9fed;
}
</style>
</head>
<body>
<h2>margin shorthand property with one value</h2>
<div>This div element has one value: top, bottom, left, and right margin of 50px.</div>
</body>
</html>
Output:

margin shorthand property with one value

This div element has one value: top, bottom, left, and right margin of 50px.

The auto Value

By using the auto value the element will automatically adjust itself with the specified width, and the remaining space will be equally split between the left and right margins with the browser calcualtion.

Let's take an Example of margin auto value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:280px;
  margin: auto;
  border: 2px solid blue;
}
</style>
</head>
<body>
<h2>Margin auto value</h2>
<div>
This div will be adjust automatically horizontally centered because of using margin: auto;
</div>
</body>
</html>
Output:

Margin auto value

This div will be adjust automatically horizontally centered by using margin: auto;