这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
1、外边距叠加：
垂直相邻的两个元素，其中A定义了margin-bottom，B定义了margin-top。在浏览器预览效果时，A与B之间垂直距离小于margin-bottom和margin-top相加之和。
（经测试，仅垂直会产生margin叠加）
例：
图1-1
图1-2
如上图所示，两个盒子之间的距离并不是相加的50px，这个现象就是由外边距叠加所引起的。
外边距叠加（margin叠加），当两个垂直外边距相遇时，两个外边距将会合并为一个外边距，叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
2、外边距叠加的三种情况。
①、同级元素
当一个元素除夕拿在另外一个元素上面的时候，第一个元素的下边距将会与第二个元素的上边距发生合并。图示如图1-1
②、父子元素
当一个元素包含在另外一个元素中时（父子关系），假设没有padding值或border值把外边距分隔开的话，父元素和子元素的外边距也会发生合并。
图2-1
图2-2
如图所示，子元素的margin值与父元素的margin值合并后，最终父元素的margin值取两者之间的最大值。
3、空元素
如图3-1
如图3-2
如图3-1，当一个空元素有上下边距时，如果没有border，padding，则元素的上下外边距发生合并。
如图3-2，如果空元素的外边距碰到另外一个元素的外边距，它们也会发生合并。
4、总结
外边距叠加只有以上三种情况，同级元素、父子元素、空元素。此外，对于外边距叠加，还需注意以下几点。
1）水平外边距不会有叠加，水平外边距指的是margin-left、margin-right
2）垂直外边距只会在以上三种情况下回叠加，垂直外边距指的是margin-top和margin-bottom。
3）外边距叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值
4）外边距叠加真的是block（块级元素）以及inline-block（行内块级）元素，不包括inline（行内元素），因为inline元素的margin-top和margin-bottom设置无效。
5、外边距叠加的意义
图5-1 margin叠加的意义
如上图所示，如果没有发生margin叠加的话，那么第一个段落就会和之后所有段落的外边距显得不一致。
**CSS定义外边距叠加的初衷就是为了更好的对文章进行排版。
6、负margin技术
1）当margin-top或margin-left为负数时，“当前元素”会被拉向指定方向
2）当元素的margin-bottom或margin-right为负数时，“后续元素”会被拉向指定方向。
图6-1 第二个元素被设置为margin-top：-30px；
如图，“当前元素”被设置为负margin-top会向上覆盖。“当前元素”及“后续元素”被同时向上拉动，margin-left为负值时同理。
图6-2 第二个元素被设置为margin-bottom：-30px；
如图，“当前元素”被设置为负margin-bottom时，会拉动“后续元素”向上覆盖，遮住自己。margin-right为负值时同理。
7、负margin技巧
常用技巧：
1）图片与文字对齐。
2）自适应两列布局
3）元素垂直居中
4）tab选项卡
1、图片与文字对齐
布局时，当图片与文字并排在一起的时候，底部水平方向上往往都是不对齐的，因为图片与文字默认都是基线对齐（vertical-align:baseline;）。如果想实现图片与文字底部水平方向对齐，除了使用“vertical-align:text-bottom”之外，还可以选择兼容性较好的负margin实现。
2、自适应两列布局
指的是左右两列中，其中有一列的宽度为自适应，另外一列的宽度是固定的。如果使用float，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。
3、元素垂直居中
元素居中的方法一般来说比较复杂，此处介绍一种比较经典的方法，使用position和负margin结合实现。
做法：首先给父元素定义“position：relative”，防止子元素定义“position：absolute”时飞到“外太空”，然后给子元素添加属性。详细代码如下：
.father{
position:relative;
}
.son{
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
margin-top:-50px; // "height值一半的负值"；
margin-left:-50px; // "width值一半的负值"；
}
4、tab选项卡
通常使用“margin-top:-1px”解决选项卡下边框显示问题。
