外边距折叠 margin合拼

外边距折叠（margin collapsing）

对于块级元素而言，其 上外边距 和 下外边距 这两个有时会合并（或折叠）为一个外边距，其大小取其中的最大者，也被称作外边距合并。

margin 合并的三种基本情况

• 相邻元素

  毗邻的两元素之间的外边距会合并（除非后者兄弟元素清除浮动，因为浮动和绝对定位的元素的外边距不会折叠）

• 块级父元素与其第一个（头，上边距合并）或最后一个子元素（尾，下边距合并）

  父元素与头之间，如果没有以下内容将两者的 margin-top 分开：

  ​ 上边框（border-top）、上内边距（padding-top）、行内内容（inline content）、创建 BFC、清除浮动；那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距合并的现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者，而父元素与该子元素之间边距消失。

  父元素与尾之间，如果没有以下内容将两者的 margin-bottom 分开：

  ​ 下边框（border-bottom）、内边距（padding-bottom）、行内内容（inline content）、height、min-height、max-height；

  那么这两对外边距之间会产生折叠，而此时子元素的外边距会“溢出”到父元素的外面。

• 空块元素

  如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

Reference：

MDN | 外边距合并

简书 | margin 合并