1、CSS外邊距合并
CSS外邊距合并，隻有上外邊距和下外邊距才會觸發外邊距合并，左外邊距和右外邊距不會。
2、相鄰元素合并-上下
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相鄰合并</title>
<style type="text/css">
.div{
width: 100px;
height: 100px;
background: red;
margin:100px;
}
</style>
</head>
<body>
<div class="div">div1</div>
<div class="div">div2</div>
</body>
</html>
運作效果如下： div1和div2 根據盒子模型的計算規則，div1下邊距100px和div2上邊距100px，理論應該是200px。實際CSS規則是合并的，是以div1和div2 之間的距離為100px;如果div1的下邊距和div2的上邊距，邊距值不一樣，那麼以最大的邊距為最終取值。
image.png
3、父子元素合并-上下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素合并</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
margin:100px;
background: blue;
}
.div2{
width: 100px;
height: 100px;
margin:100px;
background: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
</div>
</body>
</html>
運作結果： div2是div1的子元素，完全安裝盒子模型，div2應當距離浏覽器頂部100px+父元素100px =200px。因為上下邊距合并，是以div2距離頂部100px；由于左右邊距不合并，是以div2距離浏覽器左邊的距離是200px。
4、Margin穿透問題
4.1 Margin穿透效果示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透問題</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
</div>
</body>
</html>
遠行結果：代碼本意，header固定在浏覽器頂部，當給logo的div添加上一個margin-top，header距離浏覽器頂部由于父子元素合并是以出現了這個問題。
穿透
4.2 解決Margin穿透1-BFC
可以使用overflow:hidden,觸發BFC模型解決這個問題，有專門章節介紹BFC模型。
4.3 解決Margin穿透2-插入元素
在父元素中，插入一個高度、寬度都是0px的隐藏元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透問題</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
.before{
width: 0px;
height: 0px;
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="before"></div>
<div class="logo"></div>
</div>
</body>
</html>
4.4 解決Margin穿透3-:before
與插入元素的思路一緻，使用僞元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透問題</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
.header:before{
width: 0px;
height: 0px;
display: block;
content: 'clear';
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
</div>
</body>
</html>
5、空元素合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空元素合并</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
}
.div2{
margin-top: 50px;
margin-bottom: 100px;
}
.div3{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
運作結果： div2 理論占據150px=上邊距+下邊距，實際占用了100px。因為空元素上下邊距合并。如果div2的内容添加文字，顯示效果将會有巨大差異。
6、左右不合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右不合并</title>
<style type="text/css">
.div1{
overflow: hidden;
}
.div11{
margin-right: 100px;
width: 200px;
height: 100px;
float: left;
border: 1px solid red;
}
.div12{
margin-left: 100px;
float: left;
width: 200px;
height: 100px;
border: 1px solid red;
}
.div2{
margin-top: 10px;
width: 602px;
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div11">margin-right100px</div>
<div class="div12">margin-left100px</div>
</div>
<div class="div2">
200(div11寬度)+1px(div11右邊框)+100px(div11右邊距)+<br/>
200(div12寬度)+1px(div12左邊框)+100px(div12左邊距)<br/>
</div>
</body>
</html>
運作效果：
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)