本文主要是介绍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.如果都是负数跟都是正数类似 ，选择绝对值大的去使用
总结如下：
在默认布局的垂直方向上，默认情况下外边距是是不会叠加的，会出现合并现象，谁的外边距较大，就听谁的；但是在水平方向就不会出现这种状况。所以水平盒子之间其实只要注意排版一般就可以避免合并问题！
这篇关于Web前端外边距合并问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
