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

若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有塌陷問題的。文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。