保证金计算的困惑[重复]答案

【问题标题】：Confusion on Margin Calculations [duplicate]保证金计算的困惑[重复]
【发布时间】：2018-02-27 19:38:05
【问题描述】：

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(20px from prev div + 10px from current div) 就像填充的工作方式一样。但我只有 20px 的差距？为什么？

【问题讨论】：

边距collapse。 This is a good explanation 设计它们的原因。

标签： html css

【解决方案1】：

使用 display:inline-block

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

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

【讨论】：

【解决方案2】：

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

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

如果你想有 30 像素，元素必须有 float 或 display: inline-block，或者这些边距之一必须设置为 30 像素。

这是我上面写的带有浮动元素的示例（对于 inline-block 它将是相同的）元素。它们之间的边距是 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>

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

【讨论】：