Detailed explanation of CSS margin collapsing

Previous

This is a classic old question. Since a reader asked it before, I'll sort it out for you.

Let’s start with a simple example

Let's take a look at a simple example:

<style>
    .slide1 div {
      margin:10px 0;
    }
  </style>
 <div class="slide1">
    <h3>Margin collapse type 1: sibling elements</h3>
    <p>Text spacing 10px above and below</p>
    <p>Text spacing 10px above and below</p>
  </div> 

Look at the two p tags in this example. According to the style definition: margin-bottom of the first p and margin-top of the second p are both 10px, so the actual distance should be equal to 20px. However, when checking with the browser, you can find that the final margin is 10px . An example of this is margin collapsing: the top and bottom margins of a block-level element are sometimes combined (or collapsed) into a single margin.

Classification

There are three basic cases of margin collapse:

1. Adjacent elements
2. The parent element and the first child element (or the last child element, remember to think back later why it is the first or last child element)
3. Empty block-level elements

Don't rush to memorize it. First of all, the example in the previous article is the first case - the margin collapse occurs between two adjacent elements.

The second and third cases are as follows:

<style>
    .father {
      background-color: green;

    }
    .child {
      margin-top: 50px;
      background-color: red;
      height: 300px;
    }
    
      .slide3 {
      margin: 10px 0;
    }
  </style>
  <h3>Second margin collapse: parent element and first child element</h3>
  <div class="slide2 father">
    <!-- Parent element is green -->
    <div class="slide2 child">
      <!-- Child elements are red -->
    </div>
  </div>
  <h3>Third margin collapse: empty block-level elements</h3>
  <div class="slide3"></div>

Their images are also shown below:

Case 2: The margins of the child element will be "transferred" outside the parent element

Case 3: The top and bottom margins of the element will collapse

Okay, now let's take a look at the common points of these situations (it is recommended to draw their box models, but I'm too lazy to draw them-_-), and we can find the common cause of margin collapse: the margins are directly in contact with each other without any obstruction.

How to understand direct contact? It's very simple:

• In the first example, the vertical margin of the two <p> tags are directly touching;
• In the second example, since padding and border of the parent element are both 0, margin and its child elements are also in direct contact. (This example is easy to understand by drawing the box model)
• In the third example, the top and bottom margins of the empty element itself are also directly touching ( padding and border are also 0)

The results of folding in various cases

How to calculate the margin after folding can be verified simply:

• If both margins are positive, the larger margin is used after folding.
• If one margin is positive and the other is negative, the folded margin is the sum of the margins.
• If both margins are negative, the collapsed margin is the sum of the smaller margins.

How to prevent margins from collapsing

As mentioned above, the reason for margin collapse is that the margins are in direct contact. Therefore, the way to prevent the collapse is to block this direct contact. The combination of methods includes:

• In the nested case, as long as border padding is not 0, or there is an inline element to separate, such as adding a line of text in the parent element (you can try it directly in case 2)
• Any method of forming a barrier with the help of BFC, such as floating, display:table , etc. (Students who are not familiar with BFC should check it first, I will fill it in later)

summary

I have to add that what we discussed above are basic situations. In basic situations, combinations can also be made, such as between multiple adjacent elements; nesting of multiple layers of descendant elements, etc. Once you understand the basic principles, other situations will be easy to understand as long as you write a small demo to verify. Then there are the conventions: if there are mistakes in the content, please point them out (it’s totally fine if you feel uncomfortable and want to complain when reading it);

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original address: https://segmentfault.com/a/1190000016842993