如何解決外邊距塌陷的問題？
阿新 • • 發佈：2022-03-10
首先我們先看出現外邊距塌陷的三種情況：
1.當上下相鄰的兩個塊級元素相遇，上面的元素有下邊距margin-bottom，下面的元素有上邊距margin-top，則它們之間的垂直距離取兩個值中的較大者。
1 <style> 2 .box1 { 3 width: 150px; 4 height: 100px; 5 margin-bottom: 20px; 6 background-color: rgb(201, 239, 98); 7 } 8 .box2 { 9 width: 100px; 10 height:100px; 11 background-color: skyblue; 12 margin-top: 10px; 13 } 14 </style>
<body>
15 <div class="box1"></div> 16 <div class="box2"></div>
</body>
這時候兩個盒子之間的垂直距離不是30px，而是20px。
解決方法：
儘量只給一個盒子新增margin值
2.對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者。
<style> .box1 { width: 150px; height: 100px; margin-top: 20px; /* border: 1px solid #000000; */ background-color: red; } .box2 { width: 100px; height: 100px; /* border: 1px solid #000000; */ background-color: skyblue; margin-top: 10px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body>
這時候兩個盒子會發生合併，上外邊距為20px。
解決辦法：
①給父元素定義上邊框
②給父元素定義上內邊距
③給父元素新增 overflow：hidden；
④新增浮動
⑤新增絕對定位
3.如果存在一個空的塊級元素，border、padding、inline content、height、min-height都不存在，那麼上下邊距中間將沒有任何阻隔，上下外邊距將會合並。
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
可以理解成中間div寬度為0且上下邊距融合，只取margin的最大值。