外边距BUG

1.外边距合并

     < style >

     div {

         width : 300px ;

         height : 200px ;

         background-color : purple ;

    }

     .xiongda {

         margin-bottom : 100px ;

    }

     .xionger {

         background-color : pink ;

         margin-top : 150px ; /*最终两个盒子的距离是 最大的那个为准 150*/

    }

     < / style >

< body >

     < div class = "xiongda" > 1 </ div >

     < div class = "xionger" > 2 </ div >

</ body >

2.外边距塌陷

     < style >

     .father {

         width : 500px ;

         height : 500px ;

         background-color : pink ;

         /*padding-top: 50px;*/

         /*border-top: 1px solid pink; 1. 用border*/

         /*padding-top: 1px; 2 用padding */

         overflow : hidden ; /* 3. 用这个单词可以解决，具体单词的意思我们后面讲*/

    }

     .son {

         width : 200px ;

         height : 200px ;

         background-color : purple ;

         margin-top : 50px ;

         margin-left : 50px ;

    }

     < / style >

< body >

     < div class = "father" >

         < div class = "son" ></ div >

     </ div >

</ body >