CSS margin Property

The CSS margin property is used to create space around the element.

The margin property is a shorthand for the following properties:

We can use the margin property for all sides (top, bottom, left, right) at once. For the top side we use margin-top, for bottom margin-bottom, for left side margin-left and for right side margin-right.

The margin property can be defined with one, two, three, or four values:

margin : 25px 10px 15px 20px. This code means that the margin in the top side must be 25px, in the right side margin 10px, in the bottom side 15px and the left side is 20px.
margin: 15px 10px 20px. This means that the margin in the top side must be 15px, in the right and left sides 10px, and in the bottom side 20px.
margin: 15px 10px. This code means that top and bottoms margins are 15px, right and left margins are 10px.
If the margin has only one value it is applied to all four values.

Negative values are valid.

The top and bottom margins have no effect on inline elements, such as <span> or <code>.

Initial Value	0
Applies to	All elements.
Inherited	No.
Animatable	Yes. Outline is animatable.
Version	CSS1
DOM Syntax	Object.style.margin = "20px 10px";

Syntax

margin: length | auto | initial | inherit;

Example of the margin property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Try it Yourself »

Result

Example of the margin property, where the margin of an element is set to 10% for all sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Example of the margin property defined as "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Let’s take a look at the following example which shows the difference between margin, padding and border properties:

Example of the margin property with the padding and border properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
auto	Sets the margin. It is the default value of this property.	Play it »
length	Defines a margin in px, pt, cm, etc. Default value is 0.	Play it »
%	Sets the margin in % of containing element.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.