Skip to content

margin 纵向重叠问题

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

基于 MIT 许可发布