Skip to main content

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins​

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides​

CSS has properties for specifying the margin for each side of an element:

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

All the margin properties can have the following values:

  • auto the browser calculates the margin
  • length specifies a margin in px, pt, cm, etc.
  • % specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element
note

You can also use negative values to overlap content.

p {  
    margin-top:  100px;  
    margin-bottom:  100px;  
    margin-right:  150px;  
    margin-left:  80px;  
}

Margin - Shorthand Property​

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

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

So, here is how it works:

If the margin property has four values:

  • margin: 10px 20px 30px 40px;
    • top margin is 10px
    • right margin is 20px
    • bottom margin is 30px
    • left margin is 40px
p {  
    margin:  10px 20px 30px 40px;  
}

If the margin property has three values:

  • margin: 10px 20px 30px;
    • top margin is 10px
    • right and left margins are 20px
    • bottom margin is 30px
p {  
    margin:  10px 20px 30px;  
}

If the margin property has two values:

  • margin: 10px 20px;
    • top and bottom margins are 10px
    • right and left margins are 20px
p {  
    margin:  10px 20px;  
}

If the margin property has one value:

  • margin: 10px;
    • all four margins are 10px
p {  
    margin:  10px;  
}

The auto Value​

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

div {  
    width:  300px;  
    margin:  auto;  
    border:  1px solid red;  
}

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
              width:300px;
              margin: auto;
              border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div>
        This div will be horizontally centered because it has margin: auto;
        </div>
    </body>
</html>

Output:

Example auto value

The inherit Value​

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

div {  
    border:  1px solid red;  
    margin-left:  100px;  
}  
  
p.ex1 {  
    margin-left:  inherit;  
}

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
        div {
          border: 1px solid red;
          margin-left: 100px;
        }

        p.ex1 {
          margin-left: inherit;
        }
        </style>
    </head>
    <body>
        <p>Let the left margin be inherited from the parent element:</p>
        <div>
            <p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
        </div>
    </body>
</html>

Output:

![Example inherit value](imgs/010_inherit _value.png)

Table of Contents