底部邊距和頂部邊距不起作用

Question

來源如下：

<div style="border:1px solid red; margin-bottom:10px">test block1,</div>;    
<div style="border:1px solid red; margin-top:10px">test block2</div>;

在block1和block2之間總是有10px ...

我不知道怎么了。 請不要說“使用padding ”和“更改20px ”

我必須使用margin-bottom ， margin-top和10px 。

Answer 1

所謂的邊際崩潰

按照w3c

在CSS中，兩個或多個框（可能是也可能不是兄弟）的相鄰邊距可以合並形成一個邊距。 據說以這種方式組合的邊距已塌陷，所得的合並邊距稱為塌陷邊距。

閱讀此http://reference.sitepoint.com/css/collapsingmargins

Answer 2

使用float: left; 也許也clear: both; 對於兩個div來說，它肯定會起作用;）