保证金计算混乱

Question

div
     {
       margin:10px 0px 20px 0px;
       border:1px solid green;
       height:30px;
     }

<div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>

如果你看看我上面的代码，我已经应用了margin-top 10px和margin-bottom 20px。我希望每个div的输出应该有margin:30px(前一个div的20px+当前div的10px(，就像填充的工作方式一样。但我只得到20像素的差距？为什么？

Answer 1

使用显示：内联块

div
{
 margin:10px 0px 20px 0px;
 border:1px solid green;
 height:30px;
    display:inline-block;
    width:100%;
}

http://jsfiddle.net/akash4pj/q2BDa/2/

Answer 2

当您有两个具有底部和顶部边距的block元素时，边距将折叠。

在现实生活中，这意味着只有更高的一个元素被用来在元素之间产生间隙。在这种情况下，间距为20px。

如果你想有30px，元素必须有float或display: inline-block，或者其中一个边距必须设置为30px。

这里是一个带有float(对于内联块，它将是相同的(元素的例子，正如我在上面写的那样。它们之间的边距为30像素。请记住，在这两种情况下，都必须设置width。

<style>
    div {width: 100%; height: 30px; float: left; clear: left; margin: 20px 0 10px; border: 1px solid red}
</style>
<div>1</div>
<div>2</div>

http://jsfiddle.net/6WHVU/1/