Question

我在摸不着为什么需要把

padding-top：1px; 在#pageHeader标识符下，在#container处设置左上角的背景图像，否则在顶部显示几个像素。

即使我把padding-top：0;它不起作用。

此外，如果我把它放在#intro下面，或者我在pageheader 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和正文......实际上是在我的代码中，但是当我粘贴在这里时，我被编辑搞砸了。

Answer 1

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

如果您仔细阅读，请参阅W3C specs：

“当且仅当：......没有填充......将它们分开时，两个边距相邻”

规则还说：

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

所以效果是你的外边距为0，实际上获得了h1元素的上边距，这是所有顶边距的最大值。

Answer 2

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

处获取默认样式的所有详细信息

背景图像不在左上角

2 个答案: