【CSS-布局】margin 纵向重叠问题

下面我们来看一段代码：

html
<body>
  <div style="margin-top: 20px">
    <div style="margin-top: 10px">aaa</div>
  </div>

  <p style="margin-bottom: 50px">bbb</p>
  <p style="margin-top: 10px">ccc</p>

  <p style="margin-bottom: 50px">ddd</p>
  <p></p>
  <p></p>
  <p></p>
  <p style="margin-top: 10px">eee</p>
</body>

请问：

aaa 距离最顶部多少 px?
bbb 距离 ccc 多少 px?
ddd 距离 eee 多少 px?

公布答案：分别是 20px 50px 50px

常见的重叠现象

同一层相邻元素之间，相邻元素外边距重叠
父元素与子元素重叠
空的块级元素重叠

解决方法：

相邻元素之间：
1. 底部元素设置为浮动 float:left;
2. 底部元素的 position 的值为 absolute/fixed
3. 在设置 margin-top/bottom 值时统一设置上或下(推荐)
父子元素之间：
1. 外层元素添加 padding
2. 外层元素 overflow:hidden/auto(推荐);
3. 外层元素透明边框 border:1px solid transparent;
4. 内层元素绝对定位 postion:absolute:
5. 内层元素加 float:left;或 display:inline-block;