Solve the margin: top collapse problem in CCS

The HTML structure is as follows:

The CCS structure is as follows:

The page effect diagram is as follows:

Now we can see that 50px to the right and 50px to the bottom are clearly set in the child element, but the effect displayed on the page is only moving to the right but not downward.

Generally speaking, margin is used to set the outer margin of an element. Normally, when setting margin value, the parent element should be positioned relative to the browser, and the child element should be positioned relative to the parent element.

Margin-top: 50px, but the page has no effect, which means that the margin has collapsed.

So what is margin collapse?

When setting margin-top: 50px; in the child, the box inside does not change. However, when setting margin-top: 150px ; for the child element, which is greater than the height of the parent box, the child element will no longer be positioned relative to the parent element but will move down 150px relative to the browser with the parent element. This means that the margin collapses. (Margin collapse occurs when the parent is positioned relative to the browser and the child is not positioned relative to the parent, the child is like collapsed relative to the parent)

When we adjust margin-top: 50px to a height greater than the parent element, the child element will no longer be positioned relative to the parent element but will move 150px downwards with the parent element relative to the browser.
The page effect diagram is as follows:

To solve the margin collapse problem, we need to use the concept of bfc:

BFC stands for block format context . The element that triggers BFC will change a small part of the rendering rules, which can be used to solve some difficult CSS bugs.

The elements that trigger bfc are:

position:absolute;
display: inline-block;
float: left/right;
overflow:hidden;

The CSS structure is as follows:

The page effect is as follows:

Any of the above lines can make up for the problem of margin collapse~

Summarize

This is the end of this article about margin: top collapse in CCS. For more relevant CCS margin: top collapse content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!