CSS中margin的兩種現象
阿新 • • 發佈：2019-01-06
margin設定兩個標籤邊框之間的距離，但是會有兩種現象：
1、margin外邊距的合併現象
如果兩個div上下排序，給上面一個div設定margin-bottom，給下面一個div設定margin-top，那麼兩個margin會發生合併現象，合併以後取值較大的那個
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one { width: 200px; height: 100px; background: red; margin-bottom: 30px; } .two { width: 200px; height: 100px; background: green; margin-top: 50px; } </style> </head> <body> <div class="one">div1</div> <div class="two">div2</div> </body> </html>
可以發現兩個盒子的距離為50px，div1的margin還是30px，但是div2的margin更大，所以瀏覽器在渲染的時候選擇較大的margin值。
2、Margin 塌陷現象
如果一個大盒子中包含一個小盒子，給小盒子設定margin-top，大盒子會跟小盒子一起向下平移。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .one { width: 200px; height: 200px; background: red; } .two { width: 150px; height: 150px; background: green; margin-top: 40px; } </style> </head> <body> <div class="one"> <div class="two"></div> </div> </body> </html>
解決方法margin塌陷的辦法由兩種：
1、給大盒子設定邊框
border: 1px solid #000;
2、給大盒子設定overflow：hidden
overflow: hidden;