解決margin塌陷和margin合併

時間 2019-11-30

標籤解決 margin 合併欄目 CSS 简体版

原文原文鏈接

 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>嘿嘿嘿</title>
 7         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
 8         
 9     </head>
10     <style type="text/css">
11         body{
12             background: #f5f5f5;
13         }
14         .father-box{
15             width: 150px;
16             height: 150px;
17             background-color: black;
18             margin: 20px;
19         }
20         .father-box .son-box{
21             width: 50px;
22             height: 50px;
23             background-color: greenyellow;
24             margin: 20px;
25         }
26         .brother-two{
27             width: 150px;
28             height: 20px;
29             background-color: gold;
30             margin: 20px;
31         }
32     </style>
33     <body>
34         <div class="father-box brother">
35             <div class="son-box">
36             
37             </div>
38         </div>
39         <div class="brother brother-two">
40             黃色的是20px的高度
41         </div>
42         
43     </body>
44 
45 </html>

例子代碼

結果爲：css

上面執行的代碼能夠看到兩個經典的cssbug:html

father-box ：黑色盒子；son-box：綠色盒子；brother-two：黃色盒子ide

一、margin合併ui

黑色和黃色的盒子都設置了 margin:20px，按理說黑色和黃色的垂直間距是40px, 可是事實是20px, 這就是margin合併形成的。spa

margin合併：普通文檔流中塊級元素的垂直外邊距會互相合並，也就是會以他們之間外邊距大的爲準，好比：scala

我若是如今將黃色的盒子的margin-top設爲10px;黃色和黑色之間的間距不會改變，依舊是20px;可是若是設爲30px,那麼黃色和黑色之間的間距就會以較大的30px爲準，變爲30px;code

解決方法：htm

推薦也是經常使用的：若是要上下間距爲40px,只須要黃色的盒子上邊距設爲40px,黑色的盒子不用設下邊距，這樣就能夠了，意思是不須要強行解決這個bug,只須要將一邊的邊距設爲兩個盒子邊距的和就能夠了blog

不推薦也是不經常使用的（這樣會改變html結構）：在黃色和黑色的盒子外面在加一個盒子，讓這個加的外層盒子的渲染規則改成BFC（http://www.javashuo.com/article/p-pqopturn-w.html）文檔

二、margin 塌陷

黑色和綠色的margin-top都設爲了20px，可是綠色並無距離黑色上邊20px。

margin 塌陷：普通文檔流中父子塊級元素，若是父元素沒有設置上內邊距或上邊框，子元素的上邊距就會和父元素的上邊距重合，以他們兩個中間最大上邊距爲準，與距離他們最近的盒子隔開。如:

若是我如今給綠色的盒子設置margin-top:40px, 那麼黑色和綠色的盒子會一塊兒向下移動20px。

解決方法：

將父元素的渲染規則改成BFC（http://www.javashuo.com/article/p-pqopturn-w.html）

這裏簡單的列舉一些觸發BFC的方法：

一、float:left/right;

二、position:absolute;

三、overflow:hidden;

四、display:inline-block;

相關文章

相關標籤/搜索

margin+absolute

XLink 和 XPointer 教程

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<