margin 值的塌陷问题

margin值的塌陷问题

并列关系的外间距塌陷

现象

• 并列关系的两个盒子在垂直方向相邻的margin 外间距相遇会出现叠加现象。两个值相同取当前值，两个值不同取较大值。

 <div>
        <div class="box1"><img src="images/1.jpg" alt=""></div>
        <div class="box2"><img src="images/2.jpg" alt=""></div>
 </div>      

      img{
            width: 300px;
        }
        .box1{
            width: 300px;
            margin-bottom: 20px;
            border: 2px solid red;
        }
        .box2{
            width: 300px;
            margin-top: 20px;
            border: 2px solid black;
        }

 

原因

• 并列关系的两个元素共用一个外间距区域

解决办法

• 分别为这两个元素添加一个父级盒，再给父级盒设置overflow: hidden;

•  <div>
          <div class="box">
              <div class="box1"><img src="images/1.jpg" alt=""></div>
          </div>
          <div class="box">
              <div class="box2"><img src="images/2.jpg" alt=""></div>
          </div>
      </div>

   img{
              width: 300px;
          }
          .box1{
              width: 300px;
              margin-bottom: 20px;
              border: 2px solid red;
          }
          .box2{
              width: 300px;
              margin-top: 20px;
              border: 2px solid black;
          }
          .box{
              overflow: hidden;
          }

  

  福利

  

  

  

   

 

---