margin外边距合并问题以及解决方式

本文主要是介绍margin外边距合并问题以及解决方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、父子元素margin合并问题演示

在div里面有子元素div1时，若父元素div在没有设置overflow:hidden或者是border属性，则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: pink;}.div {margin: 0 auto;margin-top: 10px;width: 450px;height: 450px;background: #aaa;}.div1 {width: 200px;height: 200px;background: red;margin: 50px 0px;}</style>
</head><body><div class="div"><div class="div1"></div></div>
</body></html>

注意：div1在div中的margin-top值为0px。

二、父子元素margin合并问题解决办法

方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: pink;}.div {overflow: hidden;/* border:1px solid red;*//* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值会取div1的margin-top和其自身margin-top的最大值*/margin: 0 auto;margin-top: 10px;width: 450px;height: 450px;background: #aaa;}.div1 {width: 200px;height: 200px;background: red;margin: 50px 0px;}</style>
</head><body><div class="div"><div class="div1"></div></div>
</body></html>

三、兄弟元素margin合并问题演示

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: pink;}.div {overflow: hidden;margin: 0 auto;margin-top: 10px;width: 450px;height: 600px;background: #aaa;}.div1 {width: 200px;height: 200px;background: red;margin: 50px 0px;}.div2 {width: 200px;background: green;margin: 30px 0px;height: 200px;}</style>
</head><body><div class="div"><div class="div1"></div><div class="div2"></div></div>
</body></html>

四、兄弟元素margin合并问题解决方法

使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。参考BFC概念及应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: pink;}.div {overflow: hidden;margin: 0 auto;margin-top: 10px;width: 300px;height: 600px;background: #aaa;}.div1 {width: 200px;height: 200px;background: red;margin: 50px 0px;float: left;}.div2 {width: 200px;background: green;margin: 30px 0px;height: 200px;float: left;}</style>
</head><body><div class="div"><div class="div1"></div><div class="div2"></div></div>
</body></html>