margin塌陷

什么是margin塌陷

在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。

margin塌陷分为两种情况

1.同级元素的margin塌陷

两个块级元素m1和m2，实际的距离是50px，以margin较大的m2为准。

.m1{
  width: 100px;
  height: 50px;
  background-color: coral;
  margin-bottom: 20px;
}
.m2{
  width: 100px;
  height: 50px;
  background-color: cornsilk;
  margin-top: 50px;
}

2.父子元素的margin塌陷

父子元素之间没有任何阻的情况下，子元素设置margin-top，父元素会一起掉下来。

这里要注意，如果父元素里面有内容，或者父元素有设置border，则不会发生塌陷。

.m_outter{
  width: 100px;
  height: 150px;
  background-color: cyan;
  .m_inner{
    width: 100px;
    height: 50px;
    margin-top: 50px;
    background-color: darkgoldenrod;
  }
 }

margin塌陷的解决办法

同级元素的margin塌陷：垂直块元素只设置一方的margin，不要拆分。

父子元素的margin塌陷：可以在父元素上加border，或者用padding设置父子元素的距离，而不要用子元素的margin设置