css - 无法阻止背景图像向下移动

我对HTML还是很陌生，所以如果我做的很愚蠢，请您道歉。

我已经设置了一些这样的代码（只是一个模板）：

 <div id="outer-page">
 <div id="main-page">

    <header>
    <h1 id="title">Jamina's Free Cat-Sitting Service</h1>
    </header>

   




当我使用JSbin查看网站时，标题位于页面的顶部。我想将整个＃main-page向下移动，这是我尝试使用'margin-top'做的，但是，每当main div向下移动时，背景图像就会随之向下移动，从而导致顶部出现间隙页面。有谁知道为什么发生这种情况以及如何预防呢？

提前致谢，

史蒂夫。

最佳答案

该问题是由collapsing margins功能引起的。

例如，如果您的CSS看起来像

#outer-page {background:#DDE;}
#main-page {margin-top:2em}

该页面看起来像this JSFiddle。

解决方案是给外部页面添加填充，而不是给主页留出空白：

#outer-page {background:#DDE; padding-top:1em}

看起来像this fiddle。

（请注意，主页还将包含h1的边距，因此与所需的边距相比，您需要的填充更少；填充和边距不会一起折叠。）

另外，如果您确实想在主页上留有页边距，可以执行以下小技巧：

#outer-page {background:#DDE; padding-top:1px; margin-top:-1px;}
#main-page {margin-top:2em}

导致this fiddle。
诀窍在于，即使是1像素填充也可以防止边距崩溃，而且我们还使用-1像素余量来消除1像素填充的效果。最终结果为0，但没有崩溃。