CSS中解决外边距塌陷现象的方法

前言

外边距塌陷一般也可以称为外边距合并,简单的说,就是父元素和子元素的外边距合并在一起,最终外边距取值为二者最大的外边距值。

注意点

1. 浮动、绝对定位、固定定位的盒子不会有嵌套块级元素塌陷的问题
2. 只有上下外边距会出现塌陷问题, 左右边距不会出现这个问题。

解决方法 :

1. 给父元素设置上边框
2. 给父元素设置上内边距
3. 给父元素设置overflow-hidden
4. 转换为行内块元素
5. 直接设置浮动

代码演示

  <style>
    /* 盒子结构代码 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .father {
      width: 500px;
      height: 500px;
      background-color: red;
    }

    .son {
      width: 200px;
      height: 200px;
      margin-top: 20px;
      background-color: green;
    }
  </style>

• 给父元素设置上边框

    .father {
      width: 500px;
      height: 500px;
      /* 1.给父元素设置 border-top*/
      border-top: 30px;
      background-color: red;
    }

• 给父元素设置上内边距

    .father {
      width: 500px;
      height: 500px;
      /* 2.给父元素设置 padding-top*/
      padding-top: 20px;
      background-color: red;
    }

• 给父元素设置overflow: hidden;

    .father {
      width: 500px;
      height: 500px;
      /* 3 给父元素设置overflow: hidden; */
      overflow: hidden;
      background-color: red;
    }

• 设置为行内块元素

    .son {
      /* 4 转换为行内块 */
      display: inline-block;
      margin-top: 20px;
      background-color: green;
    }

• 直接设置浮动

    .son {
      /* 5 设置浮动 */
      float: left;
      width: 200px;
      height: 200px;
      margin-top: 20px;
      background-color: green;
    }