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;
}

最佳答案

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

CSS中的星号(*)选择器是所有内容的统称,因此请针对您要具有背景图像的对象:

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


Example of background targeting everything

Example of background targeting body only

07-24 09:39
查看更多