05 margin 纵向重叠

<!-- 如下代码，AAA 和 BBB 之间的距离是多少？ -->
<style type="text/css">
  p {
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

AAA 和 BBB 之间存在 4 个空的 <p> 标签。每个 <p> 元素的 margin-bottom 是 15px。尽管有多个 <p> 标签，由于每个 <p> 标签只有 margin-bottom 属性（且没有其他元素间的 margin-top 叠加），距离实际上只计算一次 margin-bottom 的值。

因此，AAA 和 BBB 之间的距离仅由 AAA 的 margin-bottom 决定，即 15px。

---

• 相邻元素的 margin-top 和 margin-bottom 会重叠。
• 空白内容的 p 元素也会重叠。
• margin-top 和 margin-bottom 之间的距离取决于它们之间的兄弟元素或父元素是否有 padding 或 border
• 普通流中，一个元素的 margin-top 与其第一个子元素（或 padding）的 margin-top 会发生重叠
• 普通流中，一个元素的 margin-bottom 与其下一个兄弟元素（或 padding）的 margin-top 会发生重叠
• 非普通流中的元素，不会发生 margin 重叠