margin塌陷現象
阿新 • • 發佈：2019-01-09
maigin塌陷現象是指：當兩個盒子在垂直方向上設定margin值時，會出現一個有趣的塌陷現象。
margin小的會陷入到margin大的盒子中，兩個盒子之間的距離以大的盒子的margin為準。
只有垂直方向會發生塌陷現象，水平方向上不會發生塌陷，只會累加。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> .box01{ height:200px; width: 200px; background: #0ff; margin-bottom: 40px; } .box02{ height:200px; width: 200px; background: #0f0; margin-top: 20px; } .box03{ height:200px; width: 200px; float: left; margin-right:40px; background: #0ff; } .box04{ height:200px; width: 200px; float: left; margin-left: 20px; background: #0f0; } </style> <title>盒子塌陷</title> </head> <body> <div class=box01> 北京行政副中心北部路網將重構 踏青掃墓高峰到來139條公交增運力 副中心汙水全處理重點河道將基本還清 北京開展房地產經紀機構專項執法檢查 從國務院批覆看中國各個城市的真實排名 北京市氣象局舉行氣象科普館開館儀式 </div> <div class="box02"> 北京行政副中心北部路網將重構 踏青掃墓高峰到來139條公交增運力 副中心汙水全處理重點河道將基本還清 北京開展房地產經紀機構專項執法檢查 從國務院批覆看中國各個城市的真實排名 北京市氣象局舉行氣象科普館開館儀式 </div> <div> <div class="box03"> 北京行政副中心北部路網將重構 踏青掃墓高峰到來139條公交增運力 副中心汙水全處理重點河道將基本還清 北京開展房地產經紀機構專項執法檢查 從國務院批覆看中國各個城市的真實排名 北京市氣象局舉行氣象科普館開館儀式 </div> <div class="box04"> 北京行政副中心北部路網將重構 踏青掃墓高峰到來139條公交增運力 副中心汙水全處理重點河道將基本還清 北京開展房地產經紀機構專項執法檢查 從國務院批覆看中國各個城市的真實排名 北京市氣象局舉行氣象科普館開館儀式 </div> </div> </body> </html>
效果圖：
如圖:box01設定了margin-bottom:40px, box02設定了margin-top:20px，可是box01和box02兩個盒子垂直距離只有40px，說明box2陷入到box1中去了。而box03設定了margin-right:40px,box04設定了margin-left:20px,兩個盒子之間的距離為60px，說明水平方向上盒子不會發生塌陷，只會累加。
margin塌陷解決方法：
（1）為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合。
（2）為父盒子新增overflow：hidden；
（3）為父盒子設定padding值。