前端学习（77）：css中常见margin塌陷问题之解决办法
塌陷問題
?
當兩個盒子在垂直方向上設置margin值時，會出現一個有趣的塌陷現象。
①垂直并列
首先設置兩個DIV,并為其制定寬高
1
1 /*HTML部分*/2 <body>3 <div class="box1">box1</div>4 <div class="box2">box2</div>5 </body>6 /*CSS部分*/7 <style> 8 *{9 margin: 0; 10 padding: 0; 11 } 12 .box1{ 13 width: 200px; 14 height: 200px; 15 background: yellowgreen; 16 } 17 .box2{ 18 width: 200px; 19 height: 200px; background: gray; 20 } 21 </style>? ? ? ? ??
? ?
?對box1我們為其設置margin-bottom：50px;
? 對box2我們為其設置margin-top： 40px;
?
1 <style>2 *{3 margin:0;4 padding:0;5 }6 .box1{7 width:200px;8 height:200px;9 background: yellowgreen; 10 margin-bottom: 50px; 11 } 12 .box2{ 13 width:200px; 14 height:200px; 15 background: gray; 16 margin-top: 40px; 17 } 18 </style>?
? ?我們肯定會很理所當然的認定這兩個盒子之間的距離為90px，事實上并非如此.
?如下圖所示：
? ? ? ? ??
?兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距為準。
?
②嵌套關系(父級元素塌陷)
2
1 /*CSS部分*/2 <style>3 .box1{4 width:400px;5 height:400px;6 background: pink;7 }8 .box2{9 width:200px; 10 height:200px; 11 background: lightblue; 12 } 13 </style> 14 /*HTML部分*/ 15 <body> 16 <divclass="box1"> 17 <divclass="box2"></div> 18 </div> 19 </body>?如圖示
?
? ? ? ? ?
?當為子盒子添加margin-top：10px;時會發生如下情況：
? ? ? ? ??
?子盒子和父盒子之間并沒出現期望的10px間隙而是父盒子與子盒子一起與頁面頂端產生了10px間隙（即父級盒子往下塌陷了10px）。
解決方法：
（1）為父盒子設置border，為外層添加border后父子盒子就不是真正意義上的貼合 ?（可以設置成透明：border：1px solid transparent）。
（2）為父盒子添加overflow：hidden；
（3）為父盒子設定padding值；
（4）為父盒子添加position：fixed；
（5）為父盒子添加 display：table；
（6）利用偽元素給子元素的前面添加一個空元素
.son:before{ content:"";overflow:hidden; } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的前端学习（77）：css中常见margin塌陷问题之解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [python 进阶] 第7章 函数装饰
- 下一篇： 现在还有人玩暗黑2吗？