css：垂直方向外边距margin塌陷问题及解决

margin塌陷现象：

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

统一用到的的样式

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

一、水平方向margin不会塌陷

横向排列（水平方向）边距不会被合并

.box-8 {
  margin-right: 10px;
  background-color: green;
}

.box-9 {
  margin-left: 20px;
  background-color: gray;
}




  box-8
  box-9

二、垂直方向margin出现塌陷

1、上下外边距合并

.box-1 {
  /*底部margin 10px被box-2合并了*/
  margin-bottom: 10px;
  background-color: green;
}

.box-2 {
  margin-top: 20px;
  background-color: gray;
}



box-1
box-2

两个垂直元素的margin取了最大值20px 2、内外边距合并

.box-3 {
  margin-top: 10px;
  background-color: green;
}

.box-4 {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: gray;
}




  box-4

上边距只保留了20px 3、多个子元素内外边距合并

.box-5 {
  background-color: green;
}

.box-6 {
  margin-top: 10px;
  background-color: blue;
}

.box-7 {
  margin-top: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: gray;
}




  
  box-7

box-6和box-7只保留了两者中最大值20px

三、垂直方向margin塌陷解决方法

1、同级元素: 只设置一个元素的margin

.box-10 {
  background-color: green;
}

.box-11 {
  margin-top: 30px;
  background-color: gray;
}



box-10
box-11

两个垂直元素上下边距和有了30px

2、父子元素: 子元素不设置margin，父元素设置padding

.box-12 {
  margin-top: 10px;
  background-color: green;
  padding-top: 20px;
}

.box-13 {
  /* margin-top: 20px; */
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: gray;
}




  box-13

外层上边距10px，内层上边距有20px，没有被合并

参考

1. margin塌陷问题及解决
2. CSS外边距合并（塌陷/margin越界）
3. CSS margin塌陷问题及解决方案