1.参考案例：

image.png

2.代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>11-[扩展]margin垂直外边距合并案例</title>
  9.     <style>
  10.         .box{
  11.             width: 500px;
  12.             border:1px solid black;
  15.         }
  18.         .box div{
  19.             /* 合并了 */
  20.             margin: 20px;
  22.              /* padding-top: 20px; */
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  28.     <!-- div.box>div*4 -->
  29.     <div class="box">
  30.         <div>搜狐娱乐讯 7年后，老友大银幕上再合作，他们之间的角色关系是？杨幂和霍建华，对《逆时营救》里两人的关系给出了对立又逗趣的答案霍建华：相爱相杀。杨幂：没有相爱，只有相杀。</div>
  31.         <div>搜狐娱乐讯 7年后，老友大银幕上再合作，他们之间的角色关系是？杨幂和霍建华，对《逆时营救》里两人的关系给出了对立又逗趣的答案霍建华：相爱相杀。杨幂：没有相爱，只有相杀。</div>
  32.         <div>搜狐娱乐讯 7年后，老友大银幕上再合作，他们之间的角色关系是？杨幂和霍建华，对《逆时营救》里两人的关系给出了对立又逗趣的答案霍建华：相爱相杀。杨幂：没有相爱，只有相杀。</div>
  33.         <div>搜狐娱乐讯 7年后，老友大银幕上再合作，他们之间的角色关系是？杨幂和霍建华，对《逆时营救》里两人的关系给出了对立又逗趣的答案霍建华：相爱相杀。杨幂：没有相爱，只有相杀。</div>
  35.     </div>
  37. </body>
  38. </html>

3.效果如下：

image.png

4.相关说明：

  1. 代码参考2018年传智5期python 就业班前端视频