margin塌陷以 及 margin合併

3. 乙個空元素，沒有border和padding

3. margin合併解決方法

總結：

合併條件：

注意：普通文件流中塊級元素、垂直margin、沒有border 和padding去分割 而相遇才會margin合併：margin更大的那個元素保留margin，margin較小的元素會丟掉margin

父元素margin大 – 正常margin合併

正常的合併：父元素保留margin，子元素去掉垂直margin

子元素的margin大 – --------------margin塌陷 --------------------

margin塌陷 的條件父元素沒有padding 或 border把兩個margin分開，且沒有觸發bfc時，子元素margin >父元素margin– 會發生margin塌陷

子類標籤設定margin-top:50px;父元素沒有margin時，顯示結果：不是子類標籤距離父類標籤上邊框50畫素，而是子類標籤和父類標籤距離上級標籤50個畫素

期望顯示：

兩個margin相遇就會發生合併

如果這個外邊距遇到另乙個元素的外邊距，還會發生合併

參考：

margin塌陷 margin合併

原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...

margin塌陷 margin合併的解決

父子巢狀元素垂直方向的 margin，父子元素是結合在一起的，他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位，子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時，子級沒有相對於父級定位，就像父級的棚子沒有了一樣子級相對於父級，就像塌陷了一樣 a.給父元...

margin塌陷和margin合併問題及解決方案

父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...