Web前端外边距合并问题解决

出现外边距合并问题无非以下两种情况：

一、子父类边框合并

问题概述：

比如在父级中有一子级，父级上外边距为100px，子级外边距为0，但是当子级外边距设置为200px时，打开浏览器发现子级外边距并没变化，而是父级外边距变化了子级外边距的数值（变成200）。

HTML：

CSS:

如下图所示：

HTML：

CSS:

解决方法：
1.给父级元素设置外边框
2.将子级元素改变的外边框距离转换成父级元素的内边框距离
3.使用overflow：hidden；来隐藏父级超出定义的边框
4.使用行级元素跟块级元素的属性问题display：inline-block；来使其同时获得行级跟块级属性
5.利用浮动float来进行调节
6.使用绝对定位 类似于浮动 position：absolute；来进行改变

二、兄弟盒子外边距合并

问题概述：
比如在两个div依次从上到下排列，上面的div给个下外边距为100px，下面的div给个上外边距为100px，此时发现他们之间的间距还是100px而不是我们想象的200px。

HTML：

CSS:

如下图所示：

HTML：

CSS:

解决办法：将原本设置给两个元素的属性设置给一个元素
计算的标准：
1.两个元素外边距均为正数时，选择大的去使用
2.两个元素的外边距相同时随便选择其中一个去使用
3.如果两个元素的外边距为一正一负，加和去计算
4.如果都是负数跟都是正数类似 ，选择绝对值大的去使用

总结如下：

在默认布局的垂直方向上，默认情况下外边距是是不会叠加的，会出现合并现象，谁的外边距较大，就听谁的；但是在水平方向就不会出现这种状况。所以水平盒子之间其实只要注意排版一般就可以避免合并问题！