外边距的折叠

垂直外边距的重叠(折叠)

相邻的垂直方向外边距会发生重叠现象

示例:

<style>

           .box1 ,  .box2{

                 width:200px;

                 height:200px;

                   }

           .box1{

                     background-color:#bfa;

                    设置一个下边距

                     margin-bottom:100px

                     }

            .box2{

                       background-color:orange;

                       设置一个上边距

                       margin-top:100px;

                       }

</style>

兄弟元素:

兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值，则取较大值)

特殊情况:

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

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

兄弟元素的外边距重叠，对于开发是有利的，所以我们不需要进行处理

父子元素:

父子元素间相邻外边距，子元素的会传递给父元素(上外边距)

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