外边距合并

父子级

基本页面

html结构：

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

css样式：

* {
  margin: 0;
  padding: 0;
}
.father {
  height: 200px;
  width: 200px;
  background-color: pink;
}
.son {
  height: 100px;
  width: 100px;
  background-color: red;
}

当我们给父子级各加上一个margin-top的时候，会发现以下效果

原本设想会子元素也会相对于父元素向上有一个外边距，但是并没有

这是因为子元素碰不到父元素有效的border或者padding，就会不断的一层一层的找自己的父元素的border或者padding，这样越级，最终碰到页面的body有padding则会以这个为基准

解决方案

1. 给父元素添加边框或者加上padding

   .father {
      height: 200px;
      width: 200px;
      background-color: pink;
      margin-top: 10px; 
      border:1px soild red;/*或者 padding-top: .1px; */
   }
   

2. 给父元素清除浮动 overflow:hidden overflow:auto 相当于开启了一个BFC

   .father {
       height: 200px;
       width: 200px;
       background-color: pink;
       margin-top: 10px; 
       /* overflow:hidden; */
       overflow:auto; 
   }
   

   

3. 给父子元素一方设置display:inline-block 开启了一个BFC

   .father {
     height: 200px;
     width: 200px;
     background-color: pink;
     margin-top: 10px; 
     display: inline-block;
   }
   

兄弟级

将所要元素之间的margin的大小之和直接设在其中一个元素上即可。

页面html

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

css

.box1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 20px;
}
.box2 {
 width: 100px;
 height: 100px;
 background-color: red;
 margin-top: 10px;
}

页面效果

此时中间空隙是20px 若想是30px

则给其中的一个元素设置margin即可

css

.box2 {
 width: 100px;
 height: 100px;
 background-color: red;
 margin-top: 30px;
}
或者
.box1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 30px;
}

页面效果