1 <!-- 外边距合并：当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大值。解决方案如下： 2 1、使用这种特性 3 2、设置一边的外边距，一般设置margin-top 4 3、将元素浮动或者定位 --> 5 6 <!DOCTYPE html> 7 <html lang="en"> 8 <head> 9 <meta charset="UTF-8"> 10 <title>Document</title> 11 <style type="text/css"> 12 13 .box1,.box2{ 14 width:200px; 15 height:200px; 16 background-color: gold; 17 } 18 19 .box1{ 20 margin-bottom:20px; 21 } 22 23 .box2{ 24 margin-top:10px; /* 此时两个盒子的间距等于较大的20px */ 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="box1"></div> 31 <div class="box2"></div> 32 </body> 33 </html>