1、兄弟關係的外間距塌陷：
元素並列，垂直方向相鄰的margin相遇會出現疊加：兩值不同時取較大的值
原因：上下兩兄弟關係的盒子共用乙個外間距
解決： 1）、為兩盒子分別套乙個父級盒子，並在父級盒子新增overflow：hidden
2）、 將兩兄弟分別觸發bfc
2、並列關係的外間距塌陷
元素巢狀：子元素的margin-top會疊加給父元素
原因：父子共用乙個外間距區域
解決：1） 使用border-top或者padding-top
2）給父元素新增overflow：hidden
關於css的margin塌陷現象
由於偶然翻到了以前的筆記，記載的正好是css的margin塌陷現象。於是有了寫在知乎上與大家分享討論的想法。在標準文件流中，豎直方向 記住是豎直方向，左右方向的不會出現塌陷現象 的margin會出現疊加現象，即較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有乙個較大的marg...
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...