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>