CSS margin 重叠示例

<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin 重叠示例</title>
    <style>
      .box1 {
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        margin-bottom: 20px;
      }
      
      .box2 {
        background-color: #2196F3;
        color: white;
        padding: 15px;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <div class="box1">div1: margin-bottom: 20px</div>
    <div class="box2">div2: margin-top: 40px</div>
    <p>两个 div 之间的间距是 40px（取较大值），而不是 20px + 40px = 60px</p>
  </body>