CSS margin Property

The margin property in CSS creates a 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 may be specified using 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.

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

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

Here the margin of the element is set to 10% for all sides:

Example

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

Another example where the margin of the element is specified by "em":

Example

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

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

Example

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

Values

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




Related articles