阻止 Margin 合并

Margin-top 合并

  • 父元素 overflow: hidden
  • 父元素设置 border-top
  • 父元素设置 padding-top
  • 父与第一个子之间添加一个内联元素

Margin-bottom 合并

  • 父元素 overflow: hidden
  • 父元素设置 border-bottom
  • 父元素设置 padding-bottom
  • 父与最后一个子之间添加一个内联元素
  • 父元素设置 heightmin-heightmax-height中的任意一个

满足以上任意一个既可以阻止 margin 合并。

margin 合并的计算规则:正正取大值 (10, 20) -> 20,正负相加 (-10, 20) -> 10,负负最负值 (-10, -20) -> -20