How to Make the CSS margin-top Style Work

In CSS, the adjoining margins of two and more boxes (they may or may not be siblings) can combine to create a single margin. This means that they collapse and form a collapsed margin.

In this tutorial, you will find some methods that can be used to prevent margins from collapsing and make the margin-top work.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solution with the CSS display property

One method of preventing a margin from collapsing is setting the display of one of the <div> elements to "inline-block". Margins of inline-block elements don’t collapse (not even with their in-flow children).

In the following example, we set the display of the "outer" box to "block" and the one of the “inner” box to "inline-block".

Example of applying a margin-top style by using the CSS display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #outer {
        width: 400px;
        height: 150px;
        background: #cbb2d1;
        margin: 50px auto 0 auto;
        display: block;
      }
      #inner {
        background: #fff;
        margin: 50px;
        padding: 10px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        Hello world!
      </div>
    </div>
  </body>
</html>

Result

Hello world!

Solution with a floated box

Another way that will prevent margin collapsing and make the margin-top style work is floating either of the <div> elements. Here also, margins between a floated box and another box will not collapse (not even between a float and its in-flow children).

In the example below, we set the float of the "outer" box to "left".

Example of applying a margin-top style by using a floated box:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #outer {
        width: 400px;
        height: 150px;
        background: #cbb2d1;
        margin: 50px auto 0;
        float: left;
      }
      #inner {
        background: #fff;
        margin: 50px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        Hello world!
      </div>
    </div>
  </body>
</html>

Solution with the CSS overflow property

We can also apply a margin-top and prevent collapsing if we set the overflow of our "outer" class to "auto" or another value other than "visible".

Margins of elements that create new block formatting contexts will not collapse with their in-flow children.

Example of applying a margin-top style by using the CSS overflow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #outer {
        width: 400px;
        height: 150px;
        background: #cbb2d1;
        margin: 50px auto 0 auto;
        overflow: auto;
      }
      #inner {
        background: #fff;
        margin: 50px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        Hello world!
      </div>
    </div>
  </body>
</html>

Note that two margins are adjoining only in the following cases:

  • Both elements are in-flow block-level boxes participating in the same block formatting context.
  • There isn’t any padding, border, line boxes or clearance separating them.
  • Both boxes belong to vertically-adjacent box edges.