原文
大綱
1粹排、什么是外邊距合并？(折疊外邊距)
2涩澡、外邊距帶來的影響
3顽耳、折疊的結(jié)果
4、產(chǎn)生折疊的原因
5妙同、出現(xiàn)的情況
1射富、什么是外邊距合并？(折疊外邊距)
外邊距合并指的是粥帚，當(dāng)兩個垂直外邊距相遇時胰耗，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者芒涡。而左右外邊距不合并柴灯。
在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距费尽。這種合并外邊距的方式被稱為折疊赠群，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并旱幼。行內(nèi)框查描、浮動框或絕對定位之間的外邊距不會合并。
2柏卤、外邊距帶來的影響
外邊距帶來的影響有很多種說法冬三，有說是margin越界，也有說是外邊距塌陷缘缚，但其實本質(zhì)上都是外邊距合并的的表現(xiàn)勾笆。
3、折疊的結(jié)果
兩個相鄰的外邊距都是正數(shù)時忙灼，折疊結(jié)果是它們兩者之間較大的值匠襟。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值该园。
兩個外邊距一正一負(fù)時酸舍，折疊結(jié)果是兩者的相加的和。
4里初、產(chǎn)生折疊的原因
而根據(jù)w3c規(guī)范啃勉，兩個margin是鄰接的必須滿足以下條件
4.1、必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當(dāng)中双妨。
4.2淮阐、沒有線盒叮阅，沒有空隙（clearance，下面會講到）泣特，沒有padding和border將他們分隔開
4.3浩姥、都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況：
a:元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top
b:元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top
c:height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom
d:高度為0并且最小高度也為0状您，不包含常規(guī)文檔流的子元素勒叠，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
5、出現(xiàn)的情況
5.1膏孟、兩個不同的div的上下外邊距合并
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<p>請注意眯分，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）柒桑。</p>
</body>
</html>
5.2弊决、內(nèi)外div之間外邊距合并（子元素越界或者說margin越界）
<!--
這種情況也叫做子元素越界或者margin越界
margin越界（第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題）
以第一個子元素的margin-top 為例：
當(dāng)父元素沒有邊框border時，設(shè)置第一個子元素的margin-top值的時候魁淳，會出現(xiàn)
margin-top值加在父元素上的現(xiàn)象
-->
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注釋：請注意飘诗，如果不設(shè)置 div 的內(nèi)邊距和邊框，那么內(nèi)部 div 的上外邊距將與外部
div 的上外邊距合并（疊加）先改。</p>
</body>
</html>
5.3疚察、多個子元素外邊距合并
<!--
只有當(dāng)前一個子級的寬高為0的時候蒸走，換句話說仇奶，前一個子級元素沒有辦法限制后一個子
級的margin的越界的時候才會出現(xiàn)這種情況（當(dāng)然首先父級也無法限制子級的margin越界才
可以）
-->
<html>
<head>
<meta charset="UTF-8">
<title>
盒子模型
</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
div{
width:200px;
height:200px;
margin:0 auto;
}
#div1{
margin-top:10px;
background:red;
}
#div11{
margin-top:20px;
width:0;
height:0;
background:yellow;
}
#div12{
margin-top:30px;
width:50px;
height:50px;
background:blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
</body>
</html>
參考網(wǎng)站
http://www.w3school.com.cn/css/css_margin_collapsing.asp
https://www.cnblogs.com/wangjiaojiao/p/4659429.html
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
