margin的塌陷现象

时间 2019-11-10

标签 margin 现象栏目 CSS 繁體版

原文原文链接

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

案例代码以下：html

 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>

效果以下：spa

二、若是对两个盒子都设置了浮动属性，而且他们都位于水平位置。margin会叠加：code

代码以下：htm

 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>

效果图以下：blog

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