This is the 21st day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Small problems are always ignored by others, and when they come across, they suddenly cannot be remembered, so we need to summarize frequently, which can help us to remember things better. Today we will summarize two small problems: margin collapse and margin merger

Margin collapse

What is margin collapse

What is margin collapse

Requirements: In parent and child elements, marigin to set the parent 100px to the left and 100px to the top, and set the child 50px to the left and 50px to the top of the parent.

The code is as follows:

div.father{
    width: 200px;
    height: 200px;
    background-color: rgb(219.68.101);
    margin-left: 100px;
    margin-top: 100px;
}
div.father div.son{
    width: 100px;
    height: 100px;
    background-color: rgb(56.248.207);
    margin-left: 50px;
    margin-top: 50px;
}
Copy the code

The code looks fine, okay

What a surprise! The results were beyond our expectations! Margin-top: 50px; margin-top: 50px; margin-top: 50px;

This phenomenon is called margin collapse. But a lot of people don’t understand, why is it called a collapse? In fact, you can think of it this way: in the example above, the original child element was 50px above the top of the parent element, but now it’s gone, so the roof of the parent element has no effect on the child element. Margin collapse.

To sum up, the vertical margin of parent-child nested elements is set to the maximum.

But sometimes we do not want to have such a problem, so how can we solve the problem of margin collapse?

The answer is, we can do it by triggering the BFC! So what is the BFC?

BFC

What is the BFC and its role

Block Formatting Context

CSS treats every element of HTML as a box, and it further assumes that each box has a set of normal syntax rules or rendering rules that it can use to draw the HTML elements it writes, but we can trigger the BFC in certain ways. Make it a little different from the original grammar rules.

That is, after the BFC is triggered, a particular box follows a different set of syntax rules.

The BFC sounds like a magical way to change the grammar rules of a box, but how much does it change? It doesn’t change much. Probably less than one in a thousand. It only changed a little bit. But just this little bit it solved the problem of margin collapse and margin merger

How do I trigger the BFC

Summary Method of triggering BFC:

  1. floatProperties forleft/right
  2. overflowforhidden/scroll/auto
  3. positionforabsolute/fixed
  4. displayforinline-block/table-cell/table-caption

Some people think, well, how many ways are there to trigger the BFC, and which one is better? Depending on the specific situation, I think a principle: according to the demand, see which trigger method does not affect the use of that

So let’s try it

Solve margin collapse problem

The BFC is triggered with overflow: hidden as follows

div.father{
    width: 200px;
    height: 200px;
    background-color: rgb(219.68.101);
    margin-left: 100px;
    margin-top: 100px;
    overflow: hidden;/* Trigger BFC */  
}
div.father div.son{
    width: 100px;
    height: 100px;
    background-color: rgb(56.248.207);
    margin-left: 50px;
    margin-top: 50px;
}
Copy the code

The results are as follows

Problem solved!

Margin merging

What is margin merge

As an example, take two sibling blocks, one with a margin of 100px and the other with a margin of 100px, and set them 200px apart.

.one{
    background-color: pink;
    height: 20px;
    margin-bottom: 100px;
}
.two{
    background-color: purple;
    height: 20px;
    margin-top: 100px;
}
Copy the code

The results are as follows

We find that between these two elements, their margin-bottom and margin-top are merged, and the values are displayed as larger. This phenomenon is called margin merge. The solution is also by triggering the BFC

Resolve margin merge

.one {
    background-color: pink;
    height: 20px;
    margin-bottom: 100px;
}
.wrap{
    /* Trigger BFC */
    overflow: hidden;
}
.wrap .two {
    background-color: purple;
    height: 20px;
    margin-top: 100px;
}
Copy the code

Here are the results:

Solve the problem! But it’s not usually done that way. Why?

Since margin merge is different from Margin collapse, margin collapse only adds CSS, while Margin merge also changes THE HTML structure in addition to adding CSS. As we know that the general HTML structure cannot be changed randomly, we solved the problem of merging all margins through mathematical calculation. For example, we only need to set the margin-bottom of the preceding element to 200px or the margin-top of the following element to 200px

The above is the summary of margin collapse and margin merger, please leave a message if there is any problem