父子元素外边距重合

最近在实现项目的页面时，发现元素距离body上边距总是有空白区域，总是以为是vue脚手架的默认设置，但是加入reset.css也解决不了，结果发现是外边距重合，子元素带动父元素一起下拉，这种一般开启bfc就可以了，但是发现会影响原来的布局，所以想整理一些方法，方便以后根据情况选择解决方法!

关于外边距重合：developer.mozilla.org/zh-CN/docs/…

此次遇到的是父子元素间的外边距重合问题，所以总结的解决方案都是针对此问题，其他外边距解决方法暂时不总结

MDN这样描述父子外边距重合：

没有内容将父元素和后代元素分开：

如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

例子：

<div class="parent">
  <div class="child">
  </div>
</div>

.parent{
  width:100px;
  height:100px;
  background:pink;
}

.child{
  margin:20px;
  width:50px;
  height:50px;
  background:blue;
}

会发现父元素也会下移20px，父子元素的外边距重合

解决方案：

1、父元素设置padding或border分隔父子元素的外边距

此方法不推荐，会影响父元素的大小，除非用padding-top和border-top来替代子元素的margin-top，但同时也需要设置父元素box-sizing:border-box

2、采用伪元素选择器::before来分隔父子元素的外边距（推荐）

.parent::before{
  content:"";
  display:table;
}

在父子元素间添加table标签同理

3、父元素开启bfc

关于bfc：zhuanlan.zhihu.com/p/74817089

1. 采用浮动float

/*设置父元素浮动*/
.parent{
  float:left;
  width:100px;
  height:100px;
  background:pink;
}

2. 开启绝对定位或固定定位，原理同浮动，使得元素脱离文档流（开启定位，若不设置偏移量，元素不会偏移，但是会脱离文档流）
3. 父元素设置为行内块元素
4. 父元素设置为表格单元：设置display为table或table-cell(table-cell对margin无反应，所以设置table-cell会导致父元素margin等设置失效)
5. 父元素设置为flex布局
6. 父元素的overflow不为默认值：默认值为visible

4、子元素脱离文档流或者设置为行内块元素

1. 子元素设置浮动float（脱离文档流）
2. 子元素开启固定定位或绝对定位（脱离文档流，不设置偏移量不会影响子元素原位置）
3. 子元素设置为行内块元素