CSS-16-margin值重叠问题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .repeat1{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: yellowgreen;
11                 margin-bottom: 20px;
12                 /*margin底部20px;*/
13             }
14             .repeat2{
15                 width: 200px;
16                 height: 200px;
17                 background-color: yellow;
18                 margin-top: 10px;
19                 /*margin顶部10px;*/
20             }
21             /*margin重叠问题:两个盒子margin交接的部分以两个盒子中margin值最大的为准，所以不会产生两个盒子交界处的margin值叠加*/
22         </style>
23     </head>
24     <body>
25         <div class="repeat1"></div>
26         <div class="repeat2"></div>
27     </body>
28 </html>