What is margin overlap

Before we talk about margin overlap, let’s think about what you would do if you were a browser engine right now.

Now we have two elements div1 and div2 right next to each other, with no other elements in between, and their margins will overlap. Div1 on top, div2 on bottom, margin-bottom for div1 is 20px, margin-top for div2 is 30px, how far apart should the two elements be?

50 px? If it’s 50px, then div1’s margin-bottom is not working, the elements below are not 20px, and div2’s margin-top is not working either.

If at least one margin is to work, it should work with a large margin, because a small margin may affect the display.

Therefore, when two adjacent margins overlap, a larger margin is taken.

.top {
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
  background-color: red;
}
.bottom {
  width: 200px;
  height: 100px;
  margin-top: 30px; /* Larger margin */
  background-color: blue;
}
Copy the code

Margin overlap between adjacent elements. There is also margin overlap between parent and child elements.

Let’s first explain when margin overlap occurs between parent and child elements. Now consider the case where the parent element contains a child element. Margin overlap occurs when the child element is set to margin, border, and padding of the parent element are 0. If the border or padding of the parent element is not 0, then the border or padding of the child element and the margin of the parent element are separated by the border or padding of the parent element, so that the margin of the parent element is not together and margin overlap does not occur.

The following illustration illustrates several possible situations:

Parent: margin: 0, child: margin-top: 60px; We want the child element to be 60px from the top of the parent element, and the parent element to be margin 0 from other elements. However, we can see that there is a distance between the parent element and the top, which is the margin-top set by the child element. The margin of the parent element overlapped, which is not consistent with our original intention.

<section id = 'sec'>
  <style media="screen">
    #sec {
  background: yellowgreen;
}
  .child {
    height: 100px;
    margin-top: 60px;
    background: pink;
  }
</style>
<article class='child'>
  </article>
</section>
Copy the code

Child elements

The parent element

Parent element: margin-top: 100px, child element: margin-top: 60px; As can be seen from the following results, the margin-top distance between the parent element and the external element is 100px, which verifies that a larger margin value will be taken when margins overlap.

<section id = 'sec'>
  <style media="screen">
    #sec {
      background: yellowgreen;
      margin-top: 100px;
    }
    .child {
      height: 100px;
      margin-top: 60px;
      background: pink;
    }
  </style>
  <article class='child'>
  </article>
</section>
Copy the code

The parent element

Child elements

The kind of margin collapse that we usually see is the following.

Margin overlap occurs when there is an element above the parent and child elements, and when the margin-bottom value of this element is greater than or equal to the final margin-top value obtained after the parent and child elements overlap, the margin-top of the parent element will not work, which is margin collapse.

Use the example of margin collapse on MDN.

The margin-bottom of the.blue element is 12px, and the margin-top of the.red-inner element is 10px. At this time, as shown in the figure, the margin between the.blue element and the.red-outer element is 12px, while the margin-top of the.red-inner element does not take effect and the margin collapse occurs.

  <section id = 'sec'>
    <style>
      .blue {
        height: 50px;
        margin-bottom: 12px;
        background: blue;
      }
  
      .red-outer {
        background: red;
      }

      .red-inner {
        height: 50px;
        margin-top: 10px;
      }
    </style>
    <div class="blue">blue</div>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </section>
Copy the code

How to solve margin overlap

In the case of the margin collapse example above, the essential problem is that the child element is not 10px from the top of the parent element as we intended, but has margin overlap with the parent element.

At the very beginning, we analyzed that the root cause of margin overlap of parent and child elements is that the border and padding of the parent element are 0, resulting in margin overlap of parent and child elements.

Give the parent element a border or padding value to solve the problem of overlapping margins.

But giving a border or padding value to the parent element for no reason seems inappropriate, so instead of doing this, we generally trigger the parent element’s BFC.

So let’s talk a little bit more about what a BFC is, and what kind of magic is a BFC, and why does a parent trigger a BFC and it solves margin overlap, and why does a parent trigger a BFC and it clears floats?

Let’s take a look at the BFC you should know about in our next article CSS.