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

Question

我对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向下移动时，背景图像随之向下移动，导致顶部出现间隙的页面。有谁知道为什么会发生这种情况以及如何阻止它？

提前致谢，

史蒂夫。

Answer 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，但没有崩溃。