The reason why I need to write a special article to explain margin overlap is that, firstly, as mentioned in the previous article, I am afraid that some children may not understand it; Second, the content to write is not clear in a few words.

Before we talk about overlap, let’s take a look at the margin property.

Margin basic explanation

This property, it’s so common, I’m just going to go through it, but there are a couple of things that I want you to pay attention to.

Margin; margin-left; margin-right; margin-top; margin-bottom; margin-left; margin-top; margin-bottom;

Attribute name: margin-left/margin-right/margin-top/margin-bottom


Value: < length > | < percentage > | inherit


Initial value: 0


Inheritance: none


Application Object: All dom elements, Display table-row-group,table-row, table-column-group, table-column, table-header-group, table-footer-group, table-cell


Percentage: refer to containing block
The width of the

The calculated value (
For computed value, see Article 4) : percentage value or an absolute length specified by the developer

There are some usage details that need to be explained:

  • Margin-top and margin-bottom have no effect on inline boxes (see article 18).
  • If the property value is set to percentage, the reference object is the width of containing block, even if it is margin-top and margin-bottom
  • When margin is set to a value, it indicates that all four sub-attributes are of this value. When set to two values, margin-top and margin-bottom will be the first value, margin-left and margin-right will be the second value; Set to three values, indicating that margin-top takes the first value, margin-left and margin-right take the second value, margin-bottom takes the third value; If it is set to four values, the value is set from the first value in the order of top, right, bottom, and left. Such as:
margin:20px; Margin :10px 20px; Margin-top & margin-bottom = 10px; margin-left & margin-right = 20px; margin:10px, 20px, 30px; Margin-top = 10px, margin-left & margin-right = 20px, margin-bottom = 30px margin:10px, 20px, 30px, 40px; Margin-top = 10px,margin-right = 20px,margin-bottom = 30px,margin-left = 40pxCopy the code

HMMM ~ pretty simple ~~ then do something complicated!

Two. Margin overlap details

What is margin overlap? The adjacent margins of two or more boxes are combined to form a margin. In fact, the two margins overlap, so the effect is of course the same.

How can this effect be achieved?

First, make sure you use a vertical margin (margin-top & margin-bottom). If you use margin-left and margin-right, try it a hundred times and it won’t happen!

Secondly, the application object should be selected well. Not all boxes will do! (Suddenly feel CSS rules one after another, the water is so deep ~~)

Finally, the overlapping environment should be prepared. Even if the object is chosen, overlap is not 100 percent, only when certain conditions are met.

Overlapping objects

Before I say anything, you can think about which objects have margin overlap.

We could try elimination. There are four types of boxes in CSS: float box, absolute c-box, inline-level box, and block-level box.

As those of you who have seen the positioning article before know, float box and absolute c-box both escape from the normal jam and form a stream, and each stream plays with one another without interfering with one another, so we can exclude these two. Inline-level boxes participate in inline formatting context during rendering, and boxes in this context do not overlap margins. So all that’s left is the block-level box.

So, do all block-level boxes overlap?

Yes, but — root box is excluded (rule 28).

Now, we roughly know that overlapping objects will be two block-level boxes (not including root boxes). This is only a preliminary screening condition, and the two overlapping objects must also belong to the same block formatting context. See the previous article introducing BFC to understand why.

Overlapping environment

For an eligible box, any of the following situations overlap:

  1. Top margin with its first child’s top margin in the ordinary stream
  2. Height is auto, and its bottom margin is the same as that of its last child in the normal stream
  3. Bottom margin and its next sibling in the normal stream’s top margin
  4. Overflow is visible (that is, the box does not establish BFC), computed value of min-height (Article 4) is 0, computed value of height is 0 or auto, no child box, Its top margin and bottom margin

Special case: the margin of the block-level box that overflow is not visible will not have margin overlap with any of its children in the ordinary stream, but it can find margin overlap with its brother box in the same BFC.

Let’s look at an example:

Example 1: Parent box and first child Box

<! DOCTYPE> <html> <head> <style> .parent{ margin-top:20px; margin-bottom:10px; background-color:#e6e96e;
          }
          .child{
              background-color: aquamarine;
          }
          .first{
            margin-top:30px;
            margin-bottom:30px;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
        <div class='child first'>haha</div>       
    </div>
 </body>
</html>Copy the code

Chrome displays:

Obviously, their margins overlap.

Example 2: Box’s own top margin overlaps with bottom margin && brother box’s margin overlaps && Overflow’s non-visible box does not overlap with its child box’s margin

<! DOCTYPE> <html> <head> <style> .parent{ width:500px; min-height: 0; height:auto; margin-top:20px; margin-bottom:10px; background-color:#e6e96e;
          }
          .parent-second{
              overflow:hidden;
          }
          .child{
              background-color: aquamarine;
          }
          .first-child{
            margin-top:30px;
            margin-bottom:30px;
          }
          .second-child{
              width:200px;
              margin-top:60px;
              margin-bottom:60px;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
    </div>
    <div class='parent parent-second'>
            <div class='child first-child'>haha in second div</div>
            <div class='child second-child'>lala in second div</div> 
    </div>
 </body>
</html>Copy the code

Chrom displays the following:

Div. Parent’s top margin overlaps with the bottom margin, which overlaps with the top margin of div. Parent. Second-parent’s top margin. So the margin at the top of the page is only 20px, which you can get by looking at the div.parent. Second-parent margin (orange in the image below).

From the above figure, we can also see that div.parent. Second-parent does not have margin overlap with its first child box.

Overlap margin calculation

Assuming that the top margin value of the first box is A and the top margin value of its first child is B, the margins of the two overlap, and the overlap result will be calculated according to the following rules:

If A and B are both positive, take Max (A, B).


Positive and A negative, B is B – | |


A and B are negative, then take 0 – Max (| A | B | |)

For example

To better show overlapping results, set the top margin of the HTML element to 100px and remove the body margin set by the browser.

<! DOCTYPE> <html> <head> <style> html{ margin-top:100px; } *{ margin-top:0; margin-bottom:0; } .parent{ width:100px; height:100px; background-color:#e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              background-color: aquamarine;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
        <div class='child'>haha</div>       
    </div>
 </body>
</html>Copy the code

Chrome is displayed as follows:

Example 3: A is negative and B is positive

Margin-top for div. Parent and div. Child

          .parent{
              width:100px;
              height:100px;
              margin-top:-60px;
              background-color: #e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              margin-top:10px;
              background-color: aquamarine;
          }Copy the code

Chrome displays the following:

Inspect margin;

As you can see, the overlapping margin is half of the margin set for the HTML element, i.e. 50px. It is behind the operation process: 10 – | – | = 60-50

Example 4: BOTH A and B are negative values

Margin-top is added to both divs

          .parent{
              width:100px;
              height:100px;
              margin-top:-10px;
              background-color: #e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              margin-top:-50px;
              background-color: aquamarine;
          }Copy the code

Chrome displays the following information:

Take a look at the margin

Margin of overlapping result still for 50 px, but behind the operation is different, 0 – Max (10 | | – | | – 50) = 0 = 50-50

Summary: Only vertical margin can overlap, and the participating object is the block-level box of the same BFC; Overlap occurs only when certain conditions are met; The calculation of overlap varies depending on the margin value.