情況一
當兩個塊元素處在文檔的同一個級別上
上面藍色的塊元素的上下邊距是10px
Paste_Image.png
下面綠色的塊元素的上下邊距是20px
Paste_Image.png
審查元素后會發(fā)現(xiàn)撕瞧，最終導致兩個塊的相隔距離不是 上面塊元素的外邊距+下面塊元素的外邊距矫钓，而是會取外邊距大的那一個值肴茄。
情況二
當兩個元素不是處在同一級，而是一個包含和被包含的關(guān)系時
審查外層的塊元素罢洲，它設(shè)置的外邊距是10px
Paste_Image.png
審查內(nèi)層的塊元素拴签，它設(shè)置的外邊距是20px
Paste_Image.png
從中我們可以發(fā)現(xiàn)运挫，內(nèi)層元素的外邊距并不是和外層元素的邊界的距離，而是變成了外層元素與其余元素的距離亲配。這顯然不是我們想要的效果尘应。
** 解決辦法一 **
在外層元素上加上一個邊框
Paste_Image.png
** 解決辦法二 **
把內(nèi)層元素要設(shè)置的外邊框大小，用外層元素的內(nèi)補白代替吼虎。
