为什么我需要这些div的边框才能正确渲染？

Question

我有一段代码，看起来像这样：

<div class="header"> 
</div> 
<div class="right-gradient"> 
    <div class="left-gradient"> 
     @RenderBody() 
    </div> 
</div> 

.right-gradient 
{ 
    background: url('Images/RightGradient.png') repeat-y right top transparent; 
} 
.left-gradient 
{ 
    background: url('Images/RightGradient.png') repeat-y left top transparent; 
} 

应该导致这样的事情：

 
|-------------------| 
|##### Header ######| 
|-------------------| 
|//    \\| 
|// Content \\| 
|//    \\| 
|//    \\| 
--------------------- 

然而它，而不是呈现这样的：

 
|-------------------| 
|##### Header ######| 
|-------------------| 
|     | - Note the extra space here 
|//    \\| 
|// Content \\| 
|//    \\| 
|//    \\| 
--------------------- 

虽然试图找出标题和内容之间的额外空间来自哪里，我发现添加一个边框到我的div实际上纠正解决问题并删除标题和内容之间的违规空间。

.right-gradient 
{ 
    background: url('Images/RightGradient.png') repeat-y right top transparent; 
    border: 1px red solid; 
} 
.left-gradient 
{ 
    background: url('Images/RightGradient.png') repeat-y left top transparent; 
    border: 1px blue solid; 
} 

这是为什么？

jsfiddle with sample code reproducing the problem

Answer 1

简而言之，您的利润率已经崩溃。 MDN具有的现象说明：

如果没有边框，填充，内嵌的内容，或间隙分离与它的第一个子块的边距，或无边框块的上边距，填充，内联内容，高度，最小高度或最大高度将块的边缘底部与其最后一个子块的边缘底部分开，然后这些边距将折叠。折叠后的保证金最终在家长之外。

来源：https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

Answer 2

如果你google一下，不知道它的bug或正是为什么它会发生，虽然这个问题是非常有据可查的。

尝试overflow:hidden;摆脱空间而不必添加边框。