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

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: 100px;
            background-color: pink;
            margin-bottom: 20px;
    
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 30px;
    }

设置完样式之后，发现自己的盒子的外边距跟写的不太一样。

图中所示：黄色部分为外边距，可以看出来，两边的外边距折叠了

解决办法一：在父元素的盒子上设置overflow: hidden;属性

      .box {
            overflow: hidden;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 20px;
       }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 30px;
       }

效果如下:

解决办法二：在任意一个盒子上面加display:inline-block;属性。

      .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 20px;
            display: inline-block;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 30px;
            /* display: inline-block; */
        }

效果如下：

二：两个父子级嵌套关系

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYuNw1P2-1690810830211)(D:\课上笔记\images\42.png)]

    <!-- 两个父子级元素 同时设置同一方向的外边距 里面的并不会相对于父元素而改变位置 这就是外边距塌陷问题
    解决办法：1 给父元素添加border或者padding
                   2 给父元素设置overflow: hidden;
                   3 给父元素设置  display: inline-block;
                   4. 给父元素设置display:flex
                   5. 给父元素或者子元素增加浮动
                   6.给父元素或者子元素增加定位（只能使用绝对定位和固定定位） -->
    <div class="father">
        <div class="son">2</div>
    </div>

  .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin-top: 20px;
     }

        .son {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 30px;
        }

显示效果并没有显示我们想要的结果：子级并没有与父级之间有上外边距。

解决办法有七种：

1. 给父元素添加border

2. 给父元素设置overflow: hidden;

3. 给父元素设置 display: inline-block;

4. 给父元素设置display:flex

5. 给父元素或者子元素增加浮动

6. .给父元素或者子元素增加定位（只能使用绝对定位和固定定位

7. .给父元素设置padding

       .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin-top: 20px;
            /* 解决父子级外边距塌陷问题 */
            /* 1.给父元素设置overflow:hidden属性 */
            /* overflow: hidden; */

            /* 2.把父元素设置为行内块 */
            /* display: inline-block; */

            /* 3.给父元素或者子元素设置定位（只能设置绝对定位和固定定位） */
            /* position: absolute; */

            /* 4.给父元素设置内边距 */
            /* padding: 1px; */

            /* 5.给父元素设置边框 */
            /* border: 1px solid transparent; */

            /* 6.给父元素或者子元素设置浮动 */
            /* float: left; */

            /* 7.给父元素设置display:flex属性  */
            /* display: flex; */
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-top: 30px;
        }

这些方法都可以打到我们想要的效果：

这样就可以解决外边距合并的问题了，小伙伴们快去试试吧！