这里是 HTML/CSS 新手。我想创建一个 div(蓝色)，顶部有一个 h1(红色)。 h1 周围应该有 30px 的边距。 h1 下面是另一个 div(绿色)。下面的代码“应该”有效，但我得到的结果是 h1 在左侧、底部和右侧只有 30px 的边距。顶部没有边距。这是为什么？
要了解我的意思，您可以在 http://www.w3schools.com/css/tryit.asp?filename=trycss_default 试用这段代码
谢谢!
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding:0px;
margin:0px;
color: rgb(0,0,0);
}
div#frame1
{
padding:0px;
margin:50px auto;
width:500px;
background-color: rgb(0, 0, 255);
}
h1
{
padding:0px;
margin:30px;
text-align:center;
background-color:rgb(255, 0, 0);
}
div#frame2
{
padding:0px;
margin:0px;
background: rgb(0, 255, 0);
}
</style>
</head>
<body>
<div id="frame1">
<h1>Hello world</h1>
<div id="frame2">
Hello again
</div>
</div>
</body>
</html>
最佳答案
那是由于 collapsing margins .要纠正该行为，请将 overflow:auto(或边框)添加到您的 frame1 div:
div#frame1 {
padding:0px;
margin:50px auto;
width:500px;
background-color: rgb(0, 0, 255);
overflow:auto;
}
关于html - CSS:div 中的标题页边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21920437/