【CSS面试题】外边距折叠的原因和解决

news2024/7/4 5:16:26

参考文章

什么时候出现外边距塌陷

外边距塌陷，也叫外边距折叠，在普通文档流中，在垂直方向上的2个或多个相邻的块级元素（父子或者兄弟）外边距合并成一个外边距的现象，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。
两种情况：

父子元素：子元素添加margin-top，但子元素并没有和父元素产生间隔，margin-top作用在了父盒子上

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
  .father {
    width: 500px;
    height: 300px;
    background-color: pink;
    .son {
      width: 100px;
      height: 100px;
      margin-top: 200px;
      background-color: skyblue;
    }
  }
</style>

在这里插入图片描述
或者父盒子和子盒子都添加margin-top，最后合并为一个margin-top取最大值，而不是2者之和

  .father {
    width: 500px;
    height: 300px;
    margin-top: 200px; //!!!
    background-color: pink;
    .son {
      width: 100px;
      height: 100px;
      margin-top: 100px; //!!
      background-color: skyblue;
    }
  }

在这里插入图片描述

兄弟元素：margin-bottom和margin-top合并，取最大值

<template>
  <div class="box1"></div>
  <div class="box2"></div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
  .box1 {
    width: 100px;
    height: 100px;
    margin-bottom: 100px;
    background-color: skyblue;
  }
  .box2 {
    width: 100px;
    height: 100px;
    margin-top: 100px;
    background-color: orange;
  }
</style>

在这里插入图片描述

具体的外边距计算方式

1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和

为什么会出现外边距塌陷

怎么解决外边距塌陷

父子关系

让他们不在同一个BFC中

1. 父元素不用margin，用padding

2. 给父元素添加border

相当于加了一堵墙不让margin-top冲出去

3. 给父元素开启BFC

开启BFC共有7种方式，具体介绍，点击进入

4. 给父元素添加clearfix

注意这里是before,换成after不好用
&::before {
display: grid;
content: ‘’;
}

<style lang="scss" scoped>
  .father {
    width: 500px;
    height: 400px;

    // overflow: hidden;
    background-color: pink;
    &::before {
      display: grid;
      content: '';
    }
    .son1 {
      width: 100px;
      height: 100px;
      margin-top: 100px;
      background-color: skyblue;
    }
  }
</style>