margin 纵向重叠问题

<!-- AAA 到 BBB的距离是多少？ -->
<style>
    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>

答案：15px

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠
• 空白内容的 <p ></ p> 也会发生重叠