CSS Margins

CSS margin properties allow us to set a space around the boundary of an element.

A margin is a transparent space around an element, outside of any defined borders that is used to set a gap between any two consecutive elements.

In this CSS tutorial, we will discuss all these margin properties in detail.

This element has a margin of 50px each side.

CSS has the inbuilt property margin that is used to specify the margin for each individual side of the element.

In the example below, the <h1> element has a margin of 30px each side. Try it out:

Example:

h1{
   margin: 30px;
}

The margin property can accept any of the following values:

• length – margin value in px, em, rem, pt, cm etc.
• % – margin value is calculated from the parent element.
• auto – browser automatically calculates the margin
• inherit – the margin value is inherited from its parent element.

CSS Margin for Individual Sides

We can also specify the margins for each individual side of the element such as top, bottom, left, and right using the below margin properties:

• margin-top – Specifies a margin for the top of the element
• margin-right – Specifies a margin for the right side of the element
• margin-bottom – Specifies a margin for the bottom of the element
• margin-left – Specifies a margin for the left side of the element

Try out the example below to see how does it work:

Example:

h1{
   margin-top: 50px;
   margin-right: 100px;
   margin-bottom: 50px;
   margin-left: 70px;
}

CSS Margin with Negative Values

CSS margin properties can also accept negative values.

As we saw above, a positive margin value pushes other elements away, a negative margin value can either pull other elements towards it, or it can pull itself in that direction.

In the example given below, the <h1> element pulls itself -50px towards the top. Try it out to see how it works:

Example:

h1{
  margin-top: -25px;
  background: lightgreen;
}

CSS Margin Shorthand Property

Instead of specifying margin for each side individually, we can set all of them in just one declaration using the margin shorthand property.

The margin property is a shorthand of the following properties:

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

The margin property can take one, two, three, or four values at once. It works differently with a different number of values. In the below examples, we have explained how it works:

If the margin property has four values:

• margin: 20px 40px 80px 100px
  • margin-top will be 20px
  • margin-right will be 40px
  • margin-bottom will be 80px
  • margin-left will be 100px

Try out the below example:

Example:

p{
  margin: 20px 40px 80px 100px;
  background: lightgreen;
}

If the margin property has three values:

• margin: 40px 80px 100px
  • margin-top will be 40px
  • margin-left and margin-right will be 80px
  • margin-bottom will be 100px

Example:

p{
  margin: 40px 80px 100px;
  background: lightgreen;
}

If the margin property has two values:

• margin: 40px 80px
  • margin-top and margin-bottom will have 40px
  • margin-left and margin-right will have 80px

Example:

p{
  margin: 40px 80px;
  background: lightgreen;
}

If the margin property has only one value:

• margin: 100px
  • Each side will have the same 100px margin value

Example:

p{
  margin: 100px;
  background: lightgreen;
}

Center Alignment with Margin Auto

If we set margin to auto, the browser automatically calculates the margin value. Therefore, the margin:auto; is generally used to center elements horizontally.

In the example below, the <div> element is centered horizontally.

Example:

div{
  width: 250px;
  border: 2px solid blue;
  margin: auto        /* margin property is set to auto */
}

All Margin Properties