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对此现象有一个解释：

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

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

Answer 2

如果你谷歌它，不确定它是否是一个错误或确切地说它为什么会发生这个问题，这个问题都有很好的记录。

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

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

2 个答案: