5

我有一个看起来像这样的代码块：

<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;
}

它应该导致这样的结果：

|-------------------|
|##### 标题######|
|-------------------|
|// \\|
|// 内容 \\|
|// \\|
|// \\|
---------------------

然而，它反而呈现如下：

|-------------------|
|##### 标题######|
|-------------------|
| | - 注意这里的额外空间
|// \\|
|// 内容 \\|
|// \\|
|// \\|
---------------------

在试图弄清楚标题和内容之间的额外空间来自哪里时，我发现向我的 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

4

2 回答 2

4

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

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度或最大值-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

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

于 2013-01-08T21:03:22.733 回答
1

如果你用谷歌搜索这个问题，这个问题有很好的记录，但不确定它是否是一个错误或者它究竟为什么会发生。

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

于 2013-01-08T20:47:52.577 回答