div div邊緣崩潰問題

我期待在這種情況下，第一個div的底部邊框和第二個div的頂部邊框之間的垂直間隙爲45px，但瀏覽器會摺疊底部和頂部邊距。div div邊緣崩潰問題

在瀏覽器顯示中，第一個div和第二個div的頂部邊框之間的有效差距是25px。

理想的邊框應該防止邊緣塌陷。這裏有什麼錯誤？我沒有應用任何定位或浮動。

HTML

<body> 
<div><p>A</p></div> 
<div><p>B</p></div> 
</body>

CSS

div{ 
    width:200px; 
    height:200px; 
} 
div:nth-child(1){ 
    background-color: #F52C6F; 
    border-bottom: 10px solid black; 
    margin-bottom: 20px; 
} 
div:nth-child(2){ 
    background-color: #0ECCCC; 
    border-top: 10px solid yellow; 
    margin-top: 25px; 
}

來源

2013-06-02 P K

代碼放到小提琴http://jsfiddle.net/UStF8/ – user1778606

所以，這只是CSS是如何工作的，其類型的特點看 http://stackoverflow.com/questions/14891152/css -margin-overlap-instead-of-giving-distance – user1778606

stackoverflow.com/questions/14891152/... - user1778606問題在示例中沒有任何邊界問，所以明顯的邊距會崩潰。我的意思是重複的一個「CSS邊緣重疊問題」 –

理想的邊界應該防止保證金崩潰。這裏有什麼錯誤？我沒有應用任何定位或浮動。

邊界不會阻止兄弟姐妹之間的邊緣坍塌 - 它們只會阻止父母和孩子之間的邊緣坍塌，或者邊界會與邊緣相交的任何地方。

從spec：

兩個利潤毗鄰當且僅當：

...

沒有線箱，無間隙，不填充和無邊框分離他們

...

由於邊界實際上不分離或交叉你的兩個div元素之間的利潤率，利潤率被認爲是相鄰的，因此他們之間發生保證金崩潰如常。然而，div元素的邊框會阻止您的div與其孩子的邊緣坍塌。

來源

2013-06-02 08:56:11 BoltClock

謝謝螺栓，請你提供一些參考？ http://dev.w3.org/csswg/css-box/表示，本節定義的某些相鄰邊距合併形成一個邊距。據說這些利潤率將會崩潰。如果沒有非空內容，填充或邊界區域或空格來分隔它們，則邊距是相鄰的。 –

我編輯提供了一個更可靠的參考，幷包括進一步的解釋。 – BoltClock

該規範正在討論分隔框的邊界*，而不是整個框。我只是簡化規範的說法。如果您對規格感到困惑，請參閱我的答案。 – BoltClock

這種行爲在W3C Specification on the box model: Collapsing Margins實際上是記錄。

基本上，在垂直方向鄰接邊緣塌成一個邊緣，當使用較大的裕度值和較低值被丟棄。

使用一個更高的margin值而不是兩個更低。 :-)

來源

2013-06-02 08:50:27

嘗試財產以後這樣的：

HTML：

<body> 
    <div id="parent"> 
<div><p>A</p></div> 
<div><p>B</p></div> 
    </div> 
</body>

CSS：

#parent 
{ 
    width:200px; 
    height:200px; 
} 
#parent div:nth-child(1){ 
    background-color: blue; 
    border-bottom: 10px solid black; 
    margin-bottom: 20px; 
    } 
#parent div:nth-child(2){ 
    background-color: green; 
    border-top: 10px solid yellow; 
    }

這裏是一個工作的jsfiddle：http://jsfiddle.net/hEDR3/

來源

2013-06-02 08:52:58 Gimmy

div div邊緣崩潰問題

回答

相關問題