DIV_html/css_WEB-ITnose of parent-child relationship of margin collapse

I plan to take some time to sort out the knowledge. Although I can usually get the job done by checking on the fly, when I encounter something like an interview, it is too late to check on the fly. . . .

About margin, some knowledge points are summarized as follows:

1: DIV tag of parent-child relationship and style without margin

Then we add margin to both the parent and the subset as follows:

The actual effect is as follows:

We will find that the marginTop of the blue div does not work. This is the so-called marginCollapse (border overlap). Only the largest margin value of the two is calculated for display. Write before I often encounter it when working with Css, but I didn’t know it had such a noble name. . . Ashamed.

The solution is as follows:

1. Add a border to the parent div;

2. Add an overflow: hidden to the parent div;

3. Add padding to the parent div;

4. Add float to the parent or child div;

5. Add display: inline-block to the parent and child div;

6. Add display: inline-block to the sub-div;

If there are any omissions, please feel free to add them.