背景图像不会在顶部位置离开

填充顶：1px的; 在#pageHeader标识符下，以在左上角设置背景图像设置在#container，否则它从顶部显示几个像素。

即使我把填充顶：0;它不起作用。

此外，它也可以工作，如果我把它放在#intro或者我删除页面头div内的h1标签。

我的CSS文件

html 
    { 
     margin: 0; 
     padding: 0;    

    } 
body 
    { 
     font: 75% georgia, sans-serif; 
     line-height: 1.95; 
     color: #555753;   
     background: #fff url(../images/bottom.gif) no-repeat bottom right; 
     margin: 0; 
     padding: 0; 
    } 
#container 
    { 
     background: url(../images/bg.gif) no-repeat left top; 
     padding: 0 175px 0 110px; 
     margin: 0; 
     position: relative; 
    } 
#intro 
    { 
     min-width: 470px; 
     width: 100%; 
    } 
#pageHeader 
    { 
     padding-top: 1px; 
     height: 87px; 
    }

我的HTML文件看起来像

<div id="container"> 
<div id="intro"> 
<div id="pageHeader"> 
<h1>Hello World!</h1> 
</div> 
</div> 
</div>

编辑~~ 它的HTML和身体..其实在我的代码，但我搞砸了编辑器，而粘贴在这里。

来源

2011-12-04 Shawn Taylor

对不起具有默认样式的所有细节..其已经html和身体在我的代码。 –

你在这里观察到的现象称为“折叠边距”。 h1元素有一定的余量。这与外部div的边界折叠，所以pageHeader div向下移动。通过为pageHeader div设置非零填充，可以防止边距崩溃。

见W3C specs，如果你仔细看，他们说：

“两利润率当且仅当相邻的：......没有填充......它们分开”

规则也说：

“当两个或多个边距折叠时，所得边距宽度是折叠边距宽度的最大值。”

因此，效果是，您的顶部边距为0的外部div实际上获取了h1元素的顶部边距，这是所有顶部边距的最大值。

来源

2011-12-04 11:14:51 Cito

我现在明白了。如果我理解正确，那么h1的边距将通过所有标签并到达#container div，绕过#pageheader和#intro，然后其边距生效。然后通过#intro或#pageheader中的填充顶部现在将这些div推下来，h1无法达到#container ..对吗？ –

是的;通过添加非零填充顶部，可以防止h1的边距与外部div的边距组合，因此h1的边距保留在pageHeader div内，而外部div保留其零边距并使其顶部边缘在页面顶部。 – Cito

我试图搜索所有这些类型的冲突元素和其他这些类型的奇怪（显然）奇特性的列表..但我还没有找到任何好的资源成功。你能帮我获得关于这些行为的所有信息吗？ –

您可以在http://www.w3.org/TR/CSS2/sample.html

来源

2011-12-09 12:28:05

背景图像不会在顶部位置离开

回答

相关问题