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

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

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

Suppose you think it should be this:
That's a mistake.
The result is this:

Because there is a margin collapse in CSS, the boundary collapses or the boundary overlaps. For the top and bottom two parallel
div block. The margin-bottom of the above div and the margin-top of the following div will collapse. Which is to take up and down
The maximum value of both margin as the display value, so in this sense:CSS and browser designers want to
When we were laying out. Let's say that you're in the middle of a two-side block of content, it's best to just set each block up or down
 one place in the margin is possible .   W3school also stipulates: 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.

However, the parent block Div contains the child block Div case. It will be explained by a CSS convention. That is:  for
The element that has a block-level child element calculates the height, assuming that the element has no vertical border and padding, the height of which 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. The assumption becomes:
   1:<Divclass= "Father">I am here. </ Div >
The height is the height of the text, because the text is holding the div at this time.

Again, a DIV and its sub-div attach special importance to vertical borders or padding, as well as to a pot. In
Put a basin in the face, can not buckle inside the basin. Mainly look at the lid, vertical border or fill is this "lid." In
There are at least three ways to solve the problem:

1, need to set a border for the parent Div, of course, can set the border is transparent:
   1:border: 1px solid Transparent
   2: or
   3:Border-top: 1px solid Transparent
2. add padding to the parent Div, or at least add padding-top;
   1:padding: 1px
   2: or
   3:padding-top:1px;   / * must be greater than 0*/
3. Join Overflow:hidden for parent Div
   1: over-flow:hidden;


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