盒子模型之外边距合并问题

4.1外边距合并

外边距合并有两种情况：

1.两个盒子垂直相对分布情况下，上面的盒子设置下外边距，下面的盒子设置上外边距，此时就会产生外边距的合并，那么那个外边距长那就是他们之间的边距。

2. 当父元素和子元素都是块级元素时，他们相互嵌套，同时设置上外边距时，子元素的盒子并不会因为上外边距而相对于父元素而移动一个上外边距的距离。

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一。两个垂直分布的盒子

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

要解决这种外边距合并的问题：

<!-- 两个块级元素垂直排列在一起  外边距会折叠起来  边距为最大边距 -->
    <!-- 解决办法 1. 给其中一个加display: inline-block;
    2. 给其中一个添加一个父元素，给父元素设置 overflow: hidden-->
    <div class="box">
        <div class="box1">1</div>
    </div>
    <div class="box2">2</div>

 .box1 {
   
            width: 100px;
            height