css-外边距折叠

24 阅读1分钟

css-外边距折叠

有三种情况会形成外边距折叠:

相邻兄弟元素之间

相邻兄弟元素之间 的上下margin会折叠。

前提:

  1. 后面的元素不需要清除之前的浮动。

没有内容隔开的父元素和子元素间

没有内容隔开的父元素和子元素间 的上下margin会折叠,重叠部分会溢出到父元素外。

前提:

  1. 块级元素没有content``border``padding``height或 BFC 来隔开margin

空的块级元素

空的块级元素 的上下margin会折叠。

前提:

  1. 块级元素没有content``border``padding``height等“隔离措施”。

注意

创建 BFC 的元素本身:阻止自身与子元素的margin折叠,无法阻止自身和兄弟元素margin折叠。

创建 BFC 的元素的相邻子元素之间:上下margin可能会折叠。


详见

  1. mdn-掌握外边距折叠