Problems and countermeasures: CSS margin collapse (collapse)

From: http://blog.chinaunix.net/uid-22414998-id-3138656.html

 

For the following simple code:

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
If you think it should be like this:

That's wrong. The result is as follows:

Because there is a margin collapse in CSS, that is, the border collapse or overlap. For the upper and lower Divs, the preceding Div's margin-bottom and the following Div's margin-top will collapse, that is, the maximum value in the upper and lower margin will be taken as the display value, so in this sense:The designers of CSS and browsers hope that we can only set one of the top or bottom margin blocks if there are two parallel content blocks in the layout..
However, the parent Div's inner div is explained in another CSS convention, that is:For an element with block-level sub-elements, if the element does not have a vertical border or fill, the height is the distance between the top and bottom border edge of its sub-element.. So for the Code:
<Div

Class = "father"> </div> the height of the father div is 0, because it cannot support the content of the div. If it changes:

<Div

Class = "father"> I am here. </div> the height is the height of the text, because the text is holding the div. In other words, a div and its sub-Div pay special attention to the vertical border or fill, which is like a pot with a pot in it. Can you hold the pot inside? It mainly depends on the lid, vertical border or fill is the "lid ". Therefore, there are at least two solutions:
Conclusion:
To solve the problem of margin cllapse on the top of parent and child Div, you need to set the parent Div:
1. border, of course, you can set the border to transparent;Border: 1 pxsolidtransparent



 

 
  
Or

 
  
Border-top: 1 pxsolidtransparent

 
2. Add padding to the parent Div, or at least add padding-top;
In addition, you can also use over-flow to write to the parent Div:Over-flow: hidden;
Hope to help you.