Problem and Countermeasure: CSS margin collapse (collapse)-jerrylsxu

Problem and Countermeasure: CSS margin collapse (collapse)-jerrylsxu

   2: 

   3: 

   4:     

   5:     
 

   6: 

  27: 

  28:  

  29: 

  30:  

  31: 

  32:     
Span2

  33: 

  34:  

  35: 

  36:  

  37: 

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 parallel p blocks, the margin-bottom of the preceding p and the margin-top of the following p will collapse, that is, the maximum value of the upper and lower margin blocks 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..W3school also stipulates that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

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:

   1: 

The height of father p is 0, because it cannot support p content. If it changes:

   1: 
I am here.

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 ". There are at least three solutions:

1. You need to set the border for the parent p. Of course, you can set the border to transparent:

   1: border:1px solid transparent

2: or

   3: border-top:1px solid transparent

2,Add padding to 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 to the parent DIV

   1: over-flow:hidden;