Problems and Countermeasures: CSS's margin collapse (collapse)

Source: http://www.ido321.com/387.html

<! doctypehtml Public "-//W3C//DTD HTML 4.0 transitional//en" >

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 block, the margin-bottom of the upper Div and the margin-top of the div below will collapse, which will take the upper and lower
The maximum value of both margin as the display value, so in this sense:CSS and browser designers want to
When we are in the layout, if we encounter the arrangement of the top and bottom two side-by block, it is best to only set each block above or below
 one place in the margin .   W3school also stipulates that when two vertical margins meet, they will form an outer
Margins. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

But in the case of a parent block div that contains a sub-block Div, it is explained by another CSS convention:  for
The element that has a block-level child element calculates the height of the element, if it has no vertical border and padding, its height is its child
the distance between the top of the element and the edge of the bottom border . So for the code:
   1:<Divclass= "Father"></Div  >
Father the height of this div is 0, because there is no content to open the div. If you change to:
   1:<Divclass= "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 attach special importance to vertical borders or padding, as well as a pot, a
Face put a basin, can buckle inside the basin, the main look at the lid, vertical border or fill is this "lid". In
There are at least three ways to resolve this:

1, need to set a border for the parent Div, of course, you can set the border is transparent:
   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;
   1:padding: 1px
   2: or
   3:padding-top:1px;   / * must be greater than 0*/
3. Add Overflow:hidden for parent Div
   1: over-flow:hidden;


Problems and Countermeasures: CSS's margin collapse (collapse)