CSS Margin

Margin is the spacing outside an element.

The margin property specifies the size of the margin.

This includes margin for all 4 sides: top, right, bottom, and left.

Example

#

An <input> element with a 50-pixel margin around the element.

<input type="text"
       placeholder="Your name"
       style="margin:50px;" />

Using margin

Margin adds space outside the element's border.

The value can be any length value, such as, px, pt, cm, or percentage.

The margin property sets the margin for all 4 sides of the element.

It is a shorthand for these properties:

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

For details on margin, see our CSS margin Property Reference.


More Examples

The following examples show margin accepting 4, 3, 2, and 1 values.

Margin with 4 values

An element with 4 margin values for top, right, bottom, and left sides.

An element with margin: 20px 40px 60px 80px;
<div style="margin: 20px 40px 60px 80px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  An element with margin: 20px 40px 60px 80px;
</div>


Margin with 3 values

An element with 3 margin values for top, right, bottom, and left the same as right.

An element with margin: 20px 40px 60px;
<div style="margin: 20px 40px 60px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  An element with margin: 20px 40px 60px;
</div>


Margin with 2 values

An element with 2 margin values for top and bottom, and right and left.

An element with margin: 20px 40px;
<div style="margin: 20px 40px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  An element with margin: 20px 40px;
</div>


Margin with 1 value

An element with 1 margin value for all sides.

An element with margin: 20px;
<div style="margin: 20px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  An element with margin: 20px;
</div>

The margin auto value

The margin can also be set to the auto keyword.

In that case, the browser will allocate the remaining spaces on the sides equally.

With left and right margin set to auto, the element will be centered.

A centered element with left and right margin set to auto.

A centered element with margin: 20px auto
<div style="margin: 20px auto;
            width: 250px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  A centered element with margin: 20px auto
</div>

Did you know?

Did you know?

Margin values can be negative

A negative margin value moves the element beyond its container.
In this example, the element's left side is clipped by the container.

This element has a -120px left margin.
<style>
  .margin {
    max-width: 600px;
    border: 4px solid firebrick;
    text-align: center;
    padding: 25px;
    margin-left: -120px;
  }
</style>

<div class="margin">
  This element has a -120px left margin.
</div>

Set Individual Sides Margin

Margin values can also be set for each side with these properties:

They accept any valid length value, such as, px, em, cm, and %.

An element with 4 margin properties, one for each side.

An element 4 individual margin properties.
<div style="margin-top: 20px;
            margin-right: 40px;
            margin-bottom: 60px;
            margin-left: 80px;
            border: 5px solid lightblue;
            background: aliceblue;
            padding: 15px;">

  An element 4 individual margin properties.
</div>

CSS Margin Properties


Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

You may also like

Guides