跳到主要内容

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> 也会发生重叠