8.3 margin属性(done) - acelan86/css GitHub Wiki

8.3.1 折叠外边距

在CSS中,两个以上的盒子(可能也可能不是兄弟)之间的相邻外边距可以被结合并形成一个单独的外边距。通过此方式结合的外边距被称为折叠,且产生的已结合的外边距被称为折叠外边距。

相邻垂直外边距折叠,除了:

  • 根元素的外边距不会折叠

读者注:根元素在浏览器中是指html,而非body。根元素是流外元素,流外元素不会折叠外边距。 ---by fedeoo

  • 如果一个有间隙的元素的上、下外边距相邻,则其外边距将与下面的兄弟的外边距折叠,但产生的边距不会与父亲区块的下外边距折叠。

水平外边距不折叠。

两外边距相邻当且仅当:

  • 普通流中在同一格式化上下文中的两个块级盒的外边距

读者注:这儿的普通流元素指非流外元素,流外元素包括:浮动、绝对定位元素和上面提到的根元素 ---by fedeoo

  • 没有行盒,没有间隙,没有内边距和没有边框将两外边距隔开(注意某些零高度行盒会为此被忽略)
  • 两个垂直相邻的盒子的外边距,例如,下列任意一种形式:
    1. 一个盒子的上外边距和它的正常流中的第一个子节点的上外边距
    2. 一个盒子的下外边距和正常流中它的下一个紧随的兄弟节点的上边距
    3. 正常流中最后一个子节点的下外边距和它的“auto”高度的父节点的下外边距
    4. 没有建立新的区块格式上下文的盒子的上、下外边距,且它的‘min-height’计算为0、‘height’计算为零或‘auto’并且它没有浮动的子节点。

如果一个外边距的任意外边距部分与折叠外边距相邻,则可认为折叠外边距与该外边距相邻。

注意。相邻外边距可以由不相关的兄弟或者祖先元素产生。

读者注:如正常流与兄弟节点之间有浮动节点,是不会影响正常流边距折叠。 边距折叠例子 border隔开边距,边距不重合例子 间隙见9.5.2 clear属性节 ---by fedeoo

上述的规则意味着:

  • 一个浮动盒子和另外一个盒子之间的外边距不会折叠(甚至一个浮动的盒子和其内部浮动的孩子也不会折叠)【译注:因为不是普通流中的】
  • 建立了新的格式化上下文的元素的外边距不会和他们的正常流中的子节点的外边距折叠(比如浮动元素和拥有除了“visible”以外的“overflow”属性的元素)
  • 绝对定位元素的外边距不会折叠(甚至和他们的正常流中的子节点的外边距)
  • inline-block的盒子的外边距不会折叠(甚至和他们的流内子节点的外边距)
  • 正常流中的块级元素的下外边距总是和它的下一个流内的块级兄弟节点的上外边距折叠,除非他们之间拥有间隙【译注:比如他相邻的兄弟节点因为clear属性产生间隙,不论正负间隙】
  • 一个正常流内的块级元素的上外边距与它的第一个流内的块级儿子节点的上外边距折叠, 如果这个父节点元素没有上边框,上内边边距且这个子节点没有间隙
  • 如果一个‘height’为‘auto’且‘min-height’为零的正常流内的块盒没有下内边距和下边框,且其最后一个浮动的块级孩子没有间隙,则该盒子的下外边距会与其最后一个浮动的块级孩子的下外边距折叠。
  • 如果一个盒子的的“min-height”为零,且它没有上/下边框和上/下内边距,“height”为0或者“auto”, 也不包含行盒,那么它有外边距折叠,而且它的所有的流内子节点的外边距(如果有)都会折叠。

当两个或者多个外边距折叠时,外边距宽度的计算结果是所有折叠外边距的宽度中最大的那个。在负外边距的情况下,会从正的相邻外边距的最大值中扣除负的相邻外边距的绝对值的最大值。如果没有正的外边距,则从零扣除相邻外边距的绝对值的最大值。

译注: max(positive1, positive2, positive3, ...) - max(abs(negative1), abs(negative2), abs(negative3), ...)

如果一个盒子的上下外边距相邻,那么它的外边距可能穿过它折叠。这种情况下,元素的位置取决于其他的外边距折叠元素之间的关系。

  1. 如果元素的外边距和它的父节点的上外边距折叠,这个盒子的上边框边缘与它的父节点相同。
  2. 否则,元素的父节点不参与外边距折叠,或者只有父节点的下外边距参与。这个元素上边框边缘的位置就和它有一个非0的下边框时一样。

注意,被贯穿而折叠的元素的位置不会影响其他的外边距和其一起折叠的元素的位置;其上边框边缘的位置仅用于定位这些元素的后裔。