标签：
--本文margin合并的前提是未对元素设置过float、position 元素本身在标准文档流中
首先，margin的合并（前提二个以上的margin）是发生在纵向上的，也就是说，margin的合并只会发生在垂直方向，水平方向设置的margin是不会发生合并的现象的。
上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background-color:gray;
}
.div1{
width: 100px;
height: 100px;
margin-top:20px;
background-color: blue;
}
.div2{
width: 100px;
height: 100px;
margin-top:30px;
background-color:green;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果图：
二个毗邻元素，也设置了margin，但是并没发生合并现在，why?
设置margin属性毗邻看会不会发生合并呢，改动下代码(把div1的上外边距改为下外边距)：
.div1{
width: 100px;
height: 100px;
margin-bottom:20px;
background-color: blue;
}
改动后的效果图：
这次margin发生了合并现象，它是怎么合并的呢，div1和div2之间的间距又是多大呢？先对网页截图，然后用ps打开图片测量下看看
我们看到PS信息面板中的高度值为30px，CSS样式中div1的margin-bottom设置的值为20px,div2的margin-top设置值为30px；由此得出结论：
当二个相邻元素都设置了margin，且margin属性毗邻时，元素的margin会发生合并，且取二者中的最大值
由于margin可以设置为负值，来看下下面几种情况
一正一负
代码（改动.div1）：
.div1{
width: 100px;
height: 100px;
margin-bottom:-20px;
background-color: blue;
}
效果图
通过PS测量，此时div1和div2的间距为10px;由此得出结论：
当二个元素的margin值为一个正数一个负数时，二个元素间距最终值为相加所得结果
二个负值
再次修改代码中的.div2为
width: 100px;
height: 100px;
margin-top:-30px;
margin-left: 50px; /*为了方便观察设置*/
background-color:green;
}
效果图
通过ps测量，此时div2向上偏异30px;由此得出：
当二个元素的margin值都为负数时，二个元素间距最终值为二者中最小的
在来看下包含(一个div包裹着另一个div)的情况(此处只看父元素与第一个子元素合并的情况，父元素与最后一个子元素合并的情况与此类似，不做复述)
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background-color:gray;
}
.div1{
width: 200px;
height: 200px;
margin-top:40px;
background-color: blue;
}
.div2{
width: 100px;
height: 100px;
margin-top:60px;
background-color:green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果图
通过PS测量，距浏览器内容区的边界距离为60px,由此得出：
当二个元素为父与子关系的同时，设置了相同margin值(二个正数),margin发生合并现象，且最终值为两者中的最大值
margin值一正一负时，修改.div1
.div1{
width: 200px;
height: 200px;
margin-top:-40px;
background-color: blue;
}
效果图
通过PS测量，距浏览器内容区的边界距离为20px,由此得出：
当二个元素为父与子关系的同时，设置了相同margin值(一个正数一个负数),margin发生合并现象，且最终值为两者之和
margin值二负时，修改.div2
.div2{
width: 100px;
height: 100px;
margin-top:-60px;
background-color:green;
}
效果图
通过PS测量，div可视区减少了60px，由此得出：
当二个元素为父与子关系的同时，设置了相同margin值(二个负数),margin发生合并现象，且最终值为两者中最小值
如果三个div(父子孙)都同时设置了相同的margin值(都为正数)
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background-color:gray;
}
.div1{
width: 200px;
height: 200px;
margin-top:40px;
background-color: blue;
}
.div2{
width: 100px;
height: 100px;
margin-top:60px;
background-color:green;
}
.div3{
width: 50px;
height: 50px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
</html>
效果图
通过PS测量，距浏览器内容区的边界距离为100px,由此得出：
当三个元素为父与子与孙关系的同时，设置了相同margin值(三个正数),margin发生合并现象，且最终值为三者中的最大值
margin值中有正数有负数时：
修改.div2
.div2{
width: 100px;
height: 100px;
margin-top:-60px;
background-color:green;
}
效果图
通过PS测量，距浏览器内容区的边界距离为40px,由此得出：
当三个元素为父与子与孙关系的同时，设置了相同margin值(有正数有负数),margin发生合并现象，且最终值为三者中的最大值与最小值之和
标签：
原文地址：http://www.cnblogs.com/webpure/p/5481417.html
