外边距合并

块级元素的上外边距和下外边距有时会合并成一个外边距,其大小取其最大,我们称为外边距合并(或外边距折叠),注意浮动元素和绝对定位元素的外边距不会折叠。
外边距合并主要有三种情况:

  1. 相邻元素之间


    1.jpg
  2. 父元素于其第一个或者最后一个子元素之间


    2.jpg
  3. 空的块级元素


    3.jpg

而根据w3c规范,两个margin是邻接的必须满足以下条件:

  • 必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。

  • 没有padding和border将他们分隔开

  • 都属于垂直方向上相邻的外边距,可以是下面任意一种情况

  • 元素的margin-top与其第一个常规文档流的子元素的margin-top

  • 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

  • height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

  • 高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则:

  • 创建了新的BFC的元素(浮动,绝对定位,以及各种产生BFC的操作),与它的子元素的外边距不会折叠
  • inline-block元素不与任何元素的外边距产生折叠(不是块元素)
  • 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的- margin-top会产生折叠,除非它们之间存在间隙(clearance)。
  • 一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠,条件为父元素不包含 padding 和 border ,子元素不包含 clearance。
  • 一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠,条件为父元素不包含 padding 和 border ,子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
  • 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素,并且其 'height' 为 0 或 'auto', 'min-height' 为 '0',其里面也不包含行盒(line box),其自身的 margin-top 和 margin-bottom 会折叠。

减少外边距合并操作

最实用的方法是尽量都使用margin-top或者margin-bottom,或者选择副作用最小方式

你可能感兴趣的:(外边距合并)