非浮動元素的保證金問題

Question

我給div div裏面的div都設置了margin 20px。但由於某種原因，兩個div的差距只有20px，應該是40px。來自box1的20px和來自box2的20px。我錯過了一些小事。請指出。

小提琴：

http://jsfiddle.net/3UJWf/

HTML：

<div class="sidebar"> 
    <div class="box1 common"> 
     <p>Text is here</p> 
    </div> 
    <div class="box2 common"> 
     <p>Text is here</p> 
    </div> 
</div> 

CSS：

* 
{ 
    padding:0px; 
    margin:0px; 
} 
.box1 { 
    background:red;  
    padding: 40px; 
    width: 300px; 
} 
.box2 { 
    background: green;  
    padding: 40px; 
    width: 300px; 
} 
.common { 
    margin: 20px; 
} 

Answer 1

Check Demo

CSS Margin Collapsing

float:left;或display: inline-block解決了上述問題

讓我們來探究到底是什麼崩潰邊緣的後果是，他們將如何影響上的元素頁。

的W3C規範定義摺疊邊緣如下：

「

在本說明書中，表述摺疊邊緣意味着 鄰接的邊緣（沒有非空的內容，填充，或邊界區域或 通關將它們分開）兩個或更多個方框（可能與 相鄰或嵌套）組合在一起形成單個邊距。

」

簡單來說，該定義表示當兩個元件的垂直邊緣是接觸，僅具有最大餘量值的元素的邊緣將被兌現，而的邊緣具有較小邊距值的元素將摺疊爲零。1在一個元素具有負邊距的情況下，邊距值會相加以確定最終值。如果兩者均爲負值，則使用較大的負值。該定義適用於相鄰元素和嵌套元素。

還有其他一些情況，其中的元素沒有他們的利潤崩潰：

1. 浮動元素
2. 絕對定位的元素
3. inline-block的元素
4. 元素具有溢出設定爲比其他任何可見（他們做 不與他們的孩子摺疊利潤。）
5. 清除件（他們不與他們 母塊的底部邊緣塌陷的頂部空間。）的根元素

This is a difficult concept to grasp, so let’s dive into some examples.

Answer 2

嘗試使用.common{ display: inline-block }並給側邊欄一個寬度。 解決了這個問題對我來說

Answer 3

這是在CSS 2.1規範

「在CSS中，兩個或多個盒子（可能或可能不是兄弟姐妹）的相鄰邊緣可以合併形成一個單獨的邊距。據說這種方式相結合的邊距被認爲是崩潰的，所產生的合併邊際被稱爲ac已經過時了。「

Source

最好的解決辦法是堅持了兩個div之間的clearfix。