无法阻止背景图片向下移动

【问题标题】：Can't prevent background image from moving down无法阻止背景图片向下移动
【发布时间】：2014-06-11 22:04:37
【问题描述】：

我对 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'来做，但是，每当主页div向下移动时，背景图像就会随之向下移动，导致顶部出现间隙的页面。有谁知道为什么会发生这种情况以及我该如何预防？

提前致谢，

史蒂夫。

【问题讨论】：

【解决方案1】：

问题是由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，但没有崩溃。

【讨论】：