8. 外边距的折叠

1. 垂直方向相邻的外边距会发生重叠现象。例如：

<style>
/*统一设置box1和box2的大小*/
     .box1 , .box2{
     width: 200px;
     height: 200px;
     font-size: 100px;
     }
</style>
<div class='box1'></div>
<div class='box2'></div>

<style>
    .box1{
        background-color: #bfa;

        /* 设置一个下外边距 */
        margin-bottom: 100px;
    }

    .box2{
        background-color: orange;

        /* 设置一个上外边距 */
        margin-top: 100px;
    }
</style>

结果如下：两个盒子之间相距100px，并不是200px。 

2. 兄弟（相邻）元素的折叠。

2.1 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。例如：

    <style>    
        .box1{
            background-color: #bfa;

            /* 设置一个下外边距 */
            margin-bottom: 200px;
        }

        .box2{
            background-color: orange;

            /* 设置一个上外边距 */
            margin-top: 100px;
        }
    </style>

  结果：两个盒子之间相距200px。

2.2 外边距有负值，则两者之间的距离为各自外边距的和，结果为负值盒子则会重叠，为0则紧贴。

    <style>    
        .box1{
            background-color: #bfa;

            /* 设置一个下外边距 */
            margin-bottom: -100px;
        }

        .box2{
            background-color: orange;

        }
    </style>

结果：下面的盒子覆盖在了上面的盒子上。

    <style>    
        .box1{
            background-color: #bfa;

            /* 设置一个下外边距 */
            margin-bottom: -100px;
        }

        .box2{
            background-color: orange;
            /* 设置一个上外边距 */
            margin-bottom: 100px;

        }
    </style>

结果：两个盒子紧贴。 

 

总结：

                        如果相邻的外边距一正一负，则取两者的和。

                        如果相邻的外边距都是负值，则取两者中绝对值较大的。

 

3. 父子元素之间的折叠：

                    - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

                    - 父子外边距的折叠会影响到页面的布局，必须要进行处理

3.1   父子元素间相邻外边距，子元素的会传递给父元素（上外边距）。

    <div class="box3">
        <div class="box4"></div>
    </div>

现在我们想把box4在box3里面往下移动100px，执行一下代码： 

     <style>
         .box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
     </style>

 结果如下，发现父元素box3也跟着往下移动了100px。

 

解决方案：对box3添加一个padding-top=100px；

     <style>
         .box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            padding-top:100px;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
     </style>

 但是，padding是盒子的一部分，添加padding会撑开盒子，使盒子变大，添加后box3的height变成了300px，所以还要修改box3的height：height=100px，如下：

     <style>
         .box3{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            padding-top:100px;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
     </style>

可以看到最终达到我们想要的效果： 

 

还有一种解决方案：将box3和box4的外边距隔开，通过给box3添加一个border。如下：

        .box3{
            width: 200px;
            height: 199px;
            background-color: #bfa;
            border-top: 1px #bfa solid;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 99px;/* 由于box3边框有1px，所以margin-top改成99px就行了
        }