盒子模型的外邊距塌陷和合並問題及解決方案

皇朝洋發表於2019-02-16
模型

外邊距塌陷:

         當巢狀的兩個塊元素,給子盒子加向上的外邊距時,父盒子會跟著掉下來,此時就是外邊距塌陷.
          解決方案:
         1.給父盒子加padding
         2.給父盒子加上邊框
         3.給父元素加overflow:hidden 屬性
         
         當同一個效果能用padding解決就最好不用margin解決

注意：盒子在網頁中所佔地面積=自身寬高+內邊距+邊框+外邊距

外邊距合併:
當垂直排列的兩個塊元素,同時給上面的盒子加向下的外邊距,給下面的盒子加向上的外邊距,此時會造成外邊距合併,當數值相同的時候,就是那個值,當值不同的時候,取最大的那個值

相關文章