css-外边距折叠
有三种情况会形成外边距折叠:
相邻兄弟元素之间
相邻兄弟元素之间 的上下margin会折叠。
前提:
- 后面的元素不需要清除之前的浮动。
没有内容隔开的父元素和子元素间
没有内容隔开的父元素和子元素间 的上下margin会折叠,重叠部分会溢出到父元素外。
前提:
- 块级元素没有
content``border``padding``height或 BFC 来隔开margin。
空的块级元素
空的块级元素 的上下margin会折叠。
前提:
- 块级元素没有
content``border``padding``height等“隔离措施”。
注意
创建 BFC 的元素本身:阻止自身与子元素的margin折叠,无法阻止自身和兄弟元素margin折叠。
创建 BFC 的元素的相邻子元素之间:上下margin可能会折叠。