子元素margin-top导致父元素移动的问题

问题描述

今天在修改页面样式的时候，遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个margin-top 的效果。

今天就来说说整个问题产生的原因，以及解决方案。

问题分析

在MDN上面有这么一段文字：

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。

注意：只有上下边距会产生折叠，左右边距不会产生折叠。

有三种情况会产生边距折叠：

1、同一层相邻元素之间

<div class="A">元素A</div>
<div class="B">元素B</div>

<style>
.A,
.B {
  width: 50px;
  height: 50px;
}
.A {
  background: yellow;
  margin-bottom: 10px;
}
.B {
  background: pink;
  margin-top: 20px;
}
</style>

上面两个p标签之间的间隔是20px。