解决margin塌陷问题
一：什么是margin塌陷 ？
在標準文檔流中，豎直方向（左右方向的不會出現塌陷現象）的margin會出現疊加現象，即較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有一個較大的margin值，這就是margin的塌陷現象。
二：margin塌陷分類 ？
（1）兄弟盒子之間的塌陷問題。
（2）父子盒子之間的塌陷問題。
三：詳細分析
（1）兄弟盒子之間的塌陷問題
比如下面兩個盒子模型排列：
<body><div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line- height:100px;">層1</div><div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center; line-height:100px;">層2</div></body>本來我們以為上面的盒子設置了margin-bottom的值，下面的盒子模型中設置了margin-top值，兩者之間的距離應該是（30px+20px=50px）,但是結果兩都之間的距離是30px如下面的圖所示：
遇到這樣的情況，兩個兄弟盒子之間的間距應該是按照其中比較大的那個值來取。
解決方案：
在層2那層再包裹一層，設置屬性overflow:hidden，這樣上下之間的距離就是50px了。代碼如下：
<div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line-height:100px;">層1</div><div style="overflow:hidden;"><div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center;line- height:100px;">層2</div> </div>但是這樣的弊端就是改變了HTML結構,在開發中是不能采用的。所以最好的方式是只設置層1的margin-bottom值或是 margin-top值。
（2）父子盒子之間的塌陷問題
比如下面兩個盒子模型排列：
當給box2層增加樣式margin-top:50的時候，并沒有看到父盒子與子盒子之間會有間距50px的距離，而是在父盒子上面會發現50px的間距如下圖所示：
解決方案：
（1）給父元素father添加一個border邊框，比如給box1添加樣式：border：1px solid transparent這種方式造成貼合的樣子；
（2）給父元素添加一個overflow: hidden;
（3）給父元素添加一個position: fixed;
（4）給父元素添加一個display: table;
（5）將子元素都margin改為父元素的padding
（6）給子元素son添加一個兄弟元素屬性為content:“”;overflow: hidden;
總結
以上是生活随笔為你收集整理的解决margin塌陷问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： margin塌陷如何解决
- 下一篇： 自动更新word题注