为什么我需要这些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与示例代码重现问题

Answer 1

简而言之，你的利润已经崩溃。MDN对此现象有解释：

如果没有边框、内边距、内联内容或间隙来分隔块的 margin-top 与其第一个子块的 margin-top，或者没有边框、内边距、内联内容、高度、最小高度或最大-height 将块的 margin-bottom 与其最后一个子块的 margin-bottom 分开，然后这些边距折叠。折叠的边距最终位于父级之外。

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