为什么保证金底部显示为保证金最高？

Question

我尝试在父级内部的div上添加margin-bottom，但它显示为父级＆＃39; s margin-top。为什么呢？

HTML：

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

CSS：

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
}

我的期望：

我得到了什么：

更新

  

我可以解决这个问题，但我不知道为什么代码不起作用？有人可以解释一下吗？

更新2：

看起来大多数回答是因为保证金崩溃而我的问题与this重复。但请注意，我设置 margin-bottom 但不 margin-top 。我还读到了关于利润率下降的问题，我发现没有任何规则可以说利润率可能会成为保证金最高点。有人能指出我吗？

Answer 1

将Debug and Release提供给margin-bottom: 50px;而不是#content因为您已将#box div的高度赋予此处，并且边距会崩溃。

Here it is explain with example

<强> Updated Fiddle

Answer 2

保证金似乎排在首位的原因是margin collapsing：

父母和第一个/最后一个孩子
如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或最大值 - 高度将块的边缘底部与其最后一个子节点的边缘底部分开，然后这些边距崩溃。折叠的保证金最终在父母之外。

如果您向父div（#content）添加透明边框，那么您的保证金将会显示：

#wrapper{
  border: 1px solid #F68004;
}

#content{
  border:1px solid transparent;
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
  height:10px; background-color:red;
}

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

如果您希望底部的空白区域与预期图片一样，只需将padding-bottom:50px添加到#wrapper

<强>更新

为什么margin-bottom导致margin-top：当折叠边距移到父div之外时，它变为父元素外部元素的边距底部（这是{{1}的顶部边框}） - 它会推动你的#wrapper div（使它看起来像margin-top）

Answer 3

这是符合您期望的jsFiddle：

jsFiddle

因为你想要黄色边框围绕整个内容，所以最好扩展你的包装纸高度。

＆＃13;

＆＃13;

#wrapper{
  border: 1px solid #F68004;
  height: 150px;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

＆＃13;

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以尝试这样做： Demo

您可以将其用于#content

，而不是将高度设置为#box

#content {
  background-color: #0075CF;        
}

#box {margin-bottom: 50px; height: 100px;}

Answer 5

请检查以下代码

#content {
  background-color: #0075cf;
  height: 100px;
  margin-bottom: 50px;
}

#box{
  /* margin-bottom: 50px; */
}

Answer 6

您应该为#content而不是#box提供保证金。 如果你想只为#box提供保证金。尝试给它减去负值，即 - （50 + div高度） 如果div #box height是150px，那么使用 -

＆＃13;

＆＃13;

#box {
      margin-bottom: -200px;
    } 

＆＃13;

＆＃13;

＆＃13;

Answer 7

解决方案1：

INSERT 
INTO  tblProRataSplit(CustomerNo, AccountNo, Account, ReferredBalance, Payment)
VALUES     (75053894,3400266,'PRI',19449.56,150.00)
INSERT 
INTO  tblProRataSplit(CustomerNo, AccountNo, Account, ReferredBalance, Payment)
VALUES     (75053894,3443903,'MRGE',928.42,0.00)
INSERT 
INTO  tblProRataSplit(CustomerNo, AccountNo, Account, ReferredBalance, Payment)
VALUES     (75053894,3494492,'MRGE',14286.55,0.00)
INSERT 
INTO  tblProRataSplit(CustomerNo, AccountNo, Account, ReferredBalance, Payment)
VALUES     (75053894,3494714,'MRGE',912.81,0.00)
INSERT 
INTO  tblProRataSplit(CustomerNo, AccountNo, Account, ReferredBalance, Payment)
VALUES     (75053894,3495910,'MRGE',13613.23,0.00)

解决方案2：

<div id="wrapper">
    <div id="content">       
    </div>
    <div id="box"></div>
</div>

Answer 8

试试这个

<强> CSS

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
  margin-bottom: 50px;
}