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