父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.
正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.
但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.
margin塌陷解決方法1.給父級設定邊框或內邊距(不建議使用)
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden/auto/scroll
（注意：只有垂直方向存在margin塌陷和合併，水平方向是正常的，即水平方向上子元素是正常相對父元素的，只是垂直方向上需要注意塌陷和合併問題）
兩個兄弟結構的元素在垂直方向上的margin是合併的
當把box2的margin-top設為100px後，box1和box2之間的margin就取最大的那個數，即100px>50px，所以margin為100px。
margin合併的解決方案：
1.給box2加上一層父級元素並加上overflow:hidden;
2.給兩個都加一層父級再加bfc
但是這兩種方法都改變了html結構,在開發中是不能採用的
在實際應用時,在margin合併這個問題上,我們一般不用bfc,而是通過只設定上面的元素的margin-bottom來解決距離的問題
兩個兄弟結構的元素在水平方向上的margin是正常的，不存在合併現象
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷以 及 margin合併
3.乙個空元素，沒有border和padding 3.margin合併解決方法 總結 margin 合併就是，當兩個垂直margin相遇時，它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...
margin塌陷 margin合併的解決
父子巢狀元素垂直方向的 margin，父子元素是結合在一起的，他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位，子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時，子級沒有相對於父級定位，就像父級的棚子沒有了一樣子級相對於父級，就像塌陷了一樣 a.給父元...