The problem and countermeasure of CSS's margin collapse (collapse)

For the following simple code:

If you think this should be the case:

That's a mistake. The result is this:

Because there is a margin collapse in the CSS, the boundary collapses or the boundaries overlap. For the top and bottom two parallel div blocks, the above Div's margin-bottom and the following Div's margin-top will collapse, that is, will take the upper and lower margin of the maximum value as a display value, so in this sense: The designers of CSS and browsers hope that when we are in the layout, if we encounter the arrangement of the top and bottom two side content blocks, it is best to set only one of them on each block or down margin .

But in the case of a parent block Div with a sub-block Div, it is explained by another CSS convention, that is, for elements with a block-level child element to calculate the height, if the element has no vertical border and padding, the height is the distance between the top of the child element and the edge of the bottom border . So for the code:

Click (here) to collapse or open

1. <div class= "Father" ></div>

Father the height of this div is 0, because there is no content to open the div. If you change to:

Click (here) to collapse or open

1. <div class= "Father" >i am here.</div>

The height is the height of the text, because this time the text is holding this div. In other words, a DIV and its sub-div attaches special importance to vertical borders or fills, it is like, a pot, inside a basin, can not buckle inside the basin, the main look at the lid, vertical border or fill is this "lid." So there are at least two ways to solve this problem: Conclusion: To resolve the problem with the top margin cllapse in the parent Div, you need to set the parent div: 1, border, of course, you can set the border is transparent;

Click (here) to collapse or open

1. border:1px Solid Transparent
2. Or
3. border-top:1px Solid Transparent

2, add padding for the parent Div, or at least add padding-top;
In addition, it can be resolved by Over-flow to write to the parent div:

Click (here) to collapse or open

1. Over-flow:hidden;

We hope to help you.

The problem and countermeasure of CSS's margin collapse (collapse)