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（来自prev div的20px +来自当前div的10px），就像填充是如何工作的一样。但我只得到20px的差距？为什么呢？

Answer 1

当你有两个block元素有底部和上边距时，边距会折叠。

在现实生活中，它意味着只有较高的一个用于在元素之间创造间隙。在这种情况下，间隙为20px。

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

这是我上面写的浮点数（对于内联块，它将是相同的）元素的例子。它们之间的保证金是30px。请记住，在这两种情况下都必须设置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>

Answer 2

使用display：inline-block

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