margin合并规则

同级元素间的margin

水平方向 margin 不会进行合并，为相邻元素的 margin 之和。

垂直方向 margin 会进行合并，取较大值。如若元素高度为0或内容为空，同时设置了 margin-top 和 margin-bottom，这两个margin也会叠加，取较大一个。

父子元素间的margin

水平方向：

1. 若水平方向没有设置 padding，实际上是子元素距离父元素 border 内侧的距离；
2. 若水平方向设置了 padding，实际上是子元素距离父元素 padding 内侧的距离，注意有无padding的区别。

垂直方向：

当父元素没有设置 padding 或 border 值时，父元素与子元素重合，margin作用到父元素，即margin溢出。注意这一点和水平方向的区别，水平方向不会存在该现象。

如何防止margin溢出问题，有如下几种解决办法：

1. 给父元素添加 padding-top 值
2. 给父元素添加 border 值
3. 给父元素添加属性 overflow:hidden; (推荐)
4. 给父元素或者子元素声明浮动 float
5. 使父元素或子元素声明为绝对定位 position:absolute;
6. 给父元素添加属性 overflow:auto; positon:relative；

margin 中的百分比 %

不论是父子元素还是同级元素之间，且不论是水平还是垂直方向的 margin ，都是基于父元素的宽度进行计算。

善用 margin: auto

margin: auto 就是为了处理多余的闲置尺寸而设计的。

margin: auto 的填充规则：

• 如果一侧为定值，一侧为auto，则auto为剩余空间大小。

• 如果两侧均为auto，则平分剩余空间。

上述规则可用于块级元素左右对齐，这个比float属性要好用的多，与内联元素的 text-align 控制左右对齐遥相呼应。

但触发 margin: auto 有一个很重要的前提：当 width 或 height 为 auto 时，元素必须具有对应方向的填充特性！！！

如下 html 结构，来了解这个居中的特性。

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

如下样式是否能使 son 水平垂直居中呢？

.father {
  height: 100px;
  background-color: aquamarine;
  position: relative;
}

.son {
  width: 50px;
  height: 50px;
  margin: auto;
  background-color: brown;
}

可以看到元素仅在水平方向居中，并没有在垂直方向居中。根据前面的前提：当 width 为 auto 时，son 具有水平方向的填充特性；而当 height 为 auto 时（height为0），son 没有垂直方向的填充特性。故 margin: auto 只能触发水平方向的居中。

我们将 son 的样式改成如下形式，可以看到元素实现了水平垂直居中了。

.father {
  height: 100px;
  background-color: aquamarine;
  position: relative;
}
.son {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: brown;
  margin: auto;    // 会触发计算实现居中
} 

为什么呢？还是继续前面的前提，当 width 和 height 为 auto 时，son 这个子元素能填充整个父元素，故能水平垂直居中。

水平垂直居中还有另外一种更加简洁的方式，即父容器使用 flex 布局：

.father {
  height: 100px;
  background-color: aquamarine;
  display: flex;
}
.son {
  width: 50px;
  height: 50px;
  background-color: brown;
  margin: auto;
}