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>

Result

CSS margin Property

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>

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>

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>

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.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which of the following statements are true about CSS Margins?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?