margin的塌陷现象

1、标准文档流中，margin不叠加，以较大的为准。

案例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>margin的塌陷现象</title>
 5     <style type="text/css">
 6         .div1{
 7             width: 100px;
 8             height: 100px;
 9             background-color: red;
10             margin-bottom: 10px;
11         }
12         .div2{
13             width: 100px;
14             height: 100px;
15             background-color: yellow;
16             margin-top: 30px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="div1"></div>
22     <div class="div2"></div>
23 </body>
24 </html>

效果如下：

2、如果对两个盒子都设置了浮动属性，并且他们都位于水平位置。margin会叠加：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>margin的塌陷现象</title>
 5     <style type="text/css">
 6         .div1{
 7             width: 100px;
 8             height: 100px;
 9             background-color: red;
10             float: left;
11             margin-right: 10px;
12         }
13         .div2{
14             width: 100px;
15             height: 100px;
16             background-color: yellow;
17             float: left;
18             margin-left: 30px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="div1"></div>
24     <div class="div2"></div>
25 </body>
26 </html>

效果图如下：

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷问题的。

猜你喜欢