1.多個相鄰（兄弟或者父子關係）普通流的塊元素垂直方向marigin會重疊
摺疊的結果：
兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
摺疊的產生情況：
1.必須是處於常規文件流（非float和絕對定位）的塊級盒子,並且處於同乙個bfc當中。
2.沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開(ps
:所以解決辦法中有padding或者border兩種辦法)
3.都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況
元素的margin-top與其第乙個常規文件流的子元素的margin-top
元素的margin-bottom與其下乙個常規文件流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最後乙個常規文件流的子元素的margin-bottom
高度為0並且最小高度也為0，不包含常規文件流的子元素，並且自身沒有建立新的bfc的元素的margin-top和margin-bottom
塊元素是同級關係
margin-bottom和margin-top取較大值
id="div1">div>
id="div3">div>
/*如下，margin合併了是200px*/
塊元素是父子關係
marigin-top會取較大值
id="div1">
id="div2">div>
div>
/*如下，margin-top是100px，若div2的margin-top為120px，則是120px，永遠選較大的。兩者上部貼合*/
解決父子div頂部外邊距摺疊辦法：
1.給父元素div設定邊框
2.給父元素div設定padding
3.給父元素div設定overflow–其實是生成了乙個新的bfc
2.絕對定位元素，float元素，inline-box元素，overflow : hidden不會和垂直方向上的其他元素margin摺疊–其實就是可以生成新的bfc
3.元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊
自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為 0。
以上**執行後，我們講得到的是紅色邊框的正方形，方框的寬高都應該是 100px，高度不應該是 150px。
兩個綠色的塊兒之間，相距100px，而若 b 和它的浮動包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，顯然，沒有發生摺疊。inline-block 元素、絕對定位元素的 margin同樣如此， 不會和垂直方向上其他元素的 margin 摺疊。
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
內邊距和外邊距
內邊距，在邊框和內容區之間的空白區域。padding 屬性接受長度值或百分比值 或者auto 不允許為負值 1.四個方向內邊距一致時 padding 10px 元素距離外部父元素給邊框的距離均為10px 2.四個方向還可按著上 右 下 左的順序分別定義各內邊距 padding 10px 5px 10...