为什么这些元素不在我的包装器之内？

Question

h1和p应该在白色包装div的内部，我不明白为什么它们在外部，有人可以解释吗？ 不幸的是，我不允许张贴图片，但是h1和p将自己推到带有白色背景的包装纸上方...当我不使用标签时，文本突然在包装纸内

HTML：

<!doctype html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<p id='before-header'>This is the before header area</p>

<div id='wrapper'>
    <h1>Why is this outside of the white box?</h1>
    <p>and this as well?</p>
    but when I dont use tags... suddenly its insider, what magical stupid mistake am I doing?
</div>
</body>

这是CSS：

*{
    margin: 0 auto;
    background-image: url('background.png');
}

#wrapper{
    margin: auto;
    width: 960px;
    height: 2000px;
    background: white;
}

#before-header{
    text-align: center;
}

Answer 1

这是因为您在所有内容上都设置了背景图像，因此看起来好像h1在白框之外，实际上它在白框顶部，但是背景图像看起来好像在白框之外白盒子。

css中的星号（ * ）选择器可以覆盖所有内容，因此请针对您要具有背景图像的对象：

body {
    margin: 0 auto;
    background-image: url('background.png');
}

以所有内容为背景的示例

仅背景定位对象示例

Answer 2

http://jsfiddle.net/zj9v81t7/20/
请尝试以下CSS：

*{
    margin: 0 auto;
    background-image: url('background.png');
}
#wrapper h1 {
    float: left;
    margin: 5px auto;
    width: 100%;
}#wrapper > p {
    float: left;
}
#wrapper{
    margin: auto;
    width: 960px;
    height: auto;
    background: red; overflow: hidden;
}

#before-header{
    text-align: center;
}