css margin外边距重叠/塌陷问题

一、定义

相邻块级元素或父子元素的垂直外边距会合并（折叠）为单个边距，其大小为单个边距的最大值（或如果他们相等，则仅为其中的一个），这种行为称为边距折叠

<div style="margin-bottom: 20px;">A</div>
<div style="margin-top: 30px;">B</div>
// A和B的实际间距为30px

二、哪些元素会发生外边距重叠问题

• 外边距重叠问题只会发生在普通流文档元素的上下外边距之间，且只有块级元素会发生外边距重叠
• 行内元素的垂直margin不生效、不参与布局，不会发生外边距重叠问题
• 行内块元素的垂直margin有效、参与布局，但也不会发生外边距重叠问题

三、问题常见场景及解决方法

外边距合并的规则中有以下的例外情况：

• 边框：如果元素之间有边框，即使边框是透明的，外边距不会合并
• 内边距：如果元素之间有内边距，外边距也不会合并
• BFC（块级格式化上下文）：如果元素创建了一个新的BFC，外边距也不会合并

1. 相邻的兄弟元素的margin-top和margin-bottom的值发生重叠，且都为正值，会按照最大的边距值设置

   解决方法：
   （1）给后一个元素加上float
   （2）给其中一个兄弟套上一个div，并设置border: 1px solid transparent;

2. 父级和第一个 / 最后一个子元素的margin合并，且都为正值，会按照最大的边距值设置

   解决方法：
   （1）给父元素添加overflow: hidden（创建BFC）
   这个方法只适用于子元素的高度 + 外边距高度 ＜ 父元素高度，否则子元素部分内容会被隐藏
   （2）给父元素加边框（可以加个透明的）
   （3）给父元素或者子元素设置display: inline-block
   （4）给父元素或子元素设置float
   （5）给父元素或子元素设置position: absolute
   （6）给父元素添加padding

3. 空的块级元素自身的margin-top和margin-bottom发生重叠

   解决方法：
   给自身设置border、padding或高度

4. 高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠

   解决方法：
   （1）父元素设置border-bottom、padding-bottom来分隔他们
   （2）父元素设置高度，max-height和min-height也可以解决

四、外边距重叠数值计算

• 全部为正值，取最大值
  例如 10px和5px，取10px
• 一正一负，两者相加，取得到的结果
  例如 10px和-5px，取10px + (-5px) = 5px
• 全部为负值，取绝对值最大的
  例如 -10px和-5px，取-10px