共同原因：
所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。
塌陷現象：
上下兩個margin會發生合併 稱之為塌陷 塌陷的最終尺寸是兩個值中較大的乙個
**示例：
.div1
.div2
.div3
.div4
一組 margin-bottom: 10px;
一組 margin-top: 10px;
二組 margin-bottom: 20px;
二組 margin:0px;
margin-top失效：
有兩個巢狀關係的div， 子div的margin-top失效，轉移給父div（巢狀div中父元素和子元素共享乙個 margin-top 所以轉移給了父div）
**示例：
.containdiv
.sondiv
解決辦法
1.在父元素padding-top代替 子元素的margin-top
2.父元素的overflow：hidden
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...
BFC和margin塌陷問題
margin塌陷 父子元素之間垂直方向的margin會粘合到一起，取最大的那個值 解決方法 優缺點給父級加乙個 border top 1px solid red 不專業，盡量不用 bfc block format context 塊級格式化上下文 如何觸發乙個盒子的bfc 語法給父級設定絕對定位 p...
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...