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