【前端学习 - CSS（12）margin 重叠】

1. margin 重叠

margin 重叠的规则

• 当两个 margin 都是正值的时候，取两者的最大值；
• 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
• 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加,即取和的绝对值

margin 重叠主要有四种情况的解决：

• 相邻兄弟元素 margin-bottom 和 margin-top 重叠。可以将其中一个设为 BFC；
• 父子元素 margin-top 重叠。可以给父元素添加 border-top | padding-top 来分隔父子元素，也可将父元素设为 BFC；
• 父元素高度 auto，父子元素 margin-bottom 重叠，在第二种情况的解决方案上，还可以给父元素设置 height、min-height、max-height；
• 无内容元素自身 margin-top 与 margin-bottom 重叠。可以给元素设置 border | padding | height