總是顯示更大的保證金

Question

我給出了一個塊的底部邊距爲25px，頂部邊距爲10px。總頁邊距應爲35px，但顯示爲25px。如果我給出35px的餘量，那麼它顯示總共35px。爲什麼總是顯示更大的利潤率？

下面是代碼行：

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

Answer 1

如果短，也就是利潤率應該如何工作。頂部和底部邊距可能會坍塌，在這種情況下，兩個塊之間的最終距離將等於最大邊距的寬度。

詳情看一看CSS非標準的這一部分： http://www.w3.org/TR/CSS2/box.html#collapsing-margins

當兩個或多個頁邊距崩潰，所得到的邊緣寬度是 最大壓扁邊距的寬度。

可能的解決方案： 您可以簡單地將頂部元素的margin-bottom設置爲35px，就像您所描述的那樣。

另一種方法是使要素之一是浮動：

<p style="margin-bottom:25px; outline:1px dashed #000000;clear:both;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;clear:both;float:left;width:100%">bbbbbbbbbbbbbbbb</p> 

Demo

上述解決方案基於未來你可能會在頁面上查找上面鏈接的異常：之間

邊距漂浮的盒子和其他任何盒子都不會摺疊（即使在漂浮物和它的流入兒童之間也不是） 。

Answer 2

它被稱爲「崩潰邊距」。這是正常的，並且符合W3標準。它說：

• 根元素框的邊距不會摺疊。
• 如果具有間隙的元素的頂部和底部邊距鄰接爲 ，則其邊距將在鄰接區域之後以相鄰邊距 摺疊，但導致邊距不會與父塊的底部邊距摺疊。

更多信息：
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

因此你的兩個<p>標籤：然後

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</p> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

會崩潰。

該規範還提到了利潤率未摺疊的情況。例如，浮動元素有未塌縮的利潤：一個浮動框和任何其他箱之間

頁邊距不塌陷

而且小提琴示範倒塌，未摺疊邊距：

小提琴：
http://jsfiddle.net/k8tFy/3/
（注：你甚至可以看到漂浮<p>標籤甚至與互動的<h2>標籤）