相关疑难解决方法(0)

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

为什么margin:top"主要数据"在上面的代码中不起作用？

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

<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 …

使用 CSS 清除固定和展开边距而不产生副作用（也没有额外的 HTML 元素）的一般好方法是什么？

以下因素会导致副作用（并且希望避免它们）：

• 设置overflow: hidden或overflow: auto：剪辑box-shadow、CSS 转换以及人们可能希望在框外显示的其他内容。因此它不能在多种情况下使用（但在其他方面效果很好）。
• 设置border或padding：明显的定位/尺寸效果。