Margin collapse (collapse)

1. When two objects are up and down, and both have a margin attribute, the above margin-bottom and the margin-top below will collapse

• when both Margin-bottom and margin are positive, the result is the maximum value between the two

    <  div  id  = "a"  ></ div  >  <  div  id  = "B"  ></ div  >       #a {background:red;    width:150px;    height:150px; margin-bottom:50px;     } #b {background:green;    width:100px;    height:100px; margin-top:20px;  }  

• when both Margin-bottom and margin-top are negative, the result is the absolute largest value for both.

    <  div  id  = "a"  ></ div  >  <  div  id  = "B"  ></ div  >       #a {background:red;    width:150px;   height:150px;  margin-bottom:-50px;     } #b {background:green;    width:100px;    height:100px; margin-top:-40px;  }  

• when Margin-bottom and Margin-top are one positive and one negative, the result is the sum of the two.

   <  div  id  = "a"  ></ div  >  <  div  id  = "B"  ></ div  >       #a {background:red;    width:150px;   height:150px;  margin-bottom:-50px;     } #b {background:green;    width:100px;    height:100px; margin-top:20px;  }  
   
   
    

2. When two objects are upper and lower containing relationships

• The margin-top of a child element does not work when the parent element has no padding, and no border is set

  <id= "a">    <id= "B" ></ Div > </ Div > #a {    background:red;    width:150px;    height:150px; } #b {    background:green;    width:100px;    height:100px;    margin-top:20px; }
    

• The
• parent element sets the border property, and the margin-top of the child element works

    #a {background:red;    width:150px;    height:150px; border:1px solid #000;     } #b {background:green;    width:100px;    height:100px; margin-top:20px;   <  div  id  = "a"  >  <  div  id  = "B"  ></ div  >  </ div  > 
   
    

• The
• parent element has padding, and the margin-top of the child element will work, and when Margin-top is less than the fill, the distance is the height of the fill content

    #a {background:    Red    width:150px;     height:150px;    } #b {background:green;    width:100px;    height:100px; margin-top:20px;   <  div  id  = "a"  >  liuliu  <  div  id  = "B"  ></ div  >  </ div  > 
   
    

• Methods for resolving parent element collapse Also, add Overflow:hidden for parent element, or float non-none property, or add float non-none property for child elements

If there is a new discovery will continue to supplement.

Margin collapse (collapse)